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.

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.