Angular 7+ Validator Library That Handles Validation Messages

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:

Installation:

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';

@NgModule({
  imports: [
    CommonModule,
    NgxValidatorModule.forRoot({
        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)]="model.email" required placeholder="Enter email" />
   </div>
   <button type="button" (ngxFormSubmit)="submit()" class="btn btn-primary">Submit</button>
<form>

// .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