Angular 7+ Validator Library That Handles Validation Messages Easily

ngx-validator is an Angular 7+ form validator library, and it might be the best angular validator checker library.

Handle validation messages easily and automatically, no need to manually write error hint templates, just configure validation rules, support a comprehensive custom feedback strategy.

jQuery + Bootstrap Validation Compatible Form Validator

How to make use of it:


npm install @why520crazy/ngx-validator --save
# or
yarn add @why520crazy/ngx-validator

1. Load the module into any module (AppModule or Feature module).

import { NgxValidatorModule, ValidationFeedbackStrategyBuilder } from '@why520crazy/ngx-validator';

  imports: [
        validationFeedbackStrategy: ValidationFeedbackStrategyBuilder.bootstrap(), // default is bootstrap 4 style
        validationMessages: {
            username: {
                required: 'Username is required.',
                pattern: 'Incorrect username format.'
        validateOn: 'submit' | 'blur' // default is submit
class AppModule {}

2. Add the ngxFormValidator directive to the form element and add the ngxFormSubmit directive handle to the dispatch event.

<form name="exampleForm" novalidate [ngxFormValidator]="validatorConfig">
  <div class="form-group">
      <label for="email1">Email address</label>
       <input type="email" email class="form-control" name="email" id="email1"
               [(ngModel)]="" required placeholder="Enter email" />
   <button type="button" (ngxFormSubmit)="submit()" class="btn btn-primary">Submit</button>
// .ts
validatorConfig: NgxValidatorConfig = {
    validationMessages: {
        username: {
            required: '用户名不能为空',
            pattern: '用户名格式不正确,以字母,数字,下划线组成,首字母不能为数字,必须是2-20个字符',
            ngxUniqueCheck: '输入的用户名已经存在,请重新输入'
    validateOn: 'blur' | 'submit'

submit() {
    // handle submit event

Angular 7+ Form Validator Library, ngx-validator Plugin/Github

See Demo And Download

Official Website(why520crazy): Click Here

This superior jQuery/javascript plugin is developed by why520crazy. For extra advanced usage, please go to the official website.

Related Posts


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Product Thumbnail Slider With Positive Zoom Effect jQuery

Positive Zoom is a JavaScript library for creating an image gallery where you can zoom in on the current image by hovering over it. Must Read: Pure…


Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and…


Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window. A responsive, customizable, and…


Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a…


Neumorphic Design Inspiration Style CSS Shapes | Neumorphism

Multi-dimensional design is inspired by the physical world and adds textures, reflection, shadows, layers, and depths to the flat design making the UI elements more visible. CSS…