@protradeshare/ngx-validator v9.0.1

ngx-validator

An Angular 9+ form validator library, may be the best angular validator library in the world.

handle validation messages easy and automatic, don't need to manually write error tips templates, just configure validation rules, and support extensive custom feedback strategy.

Demo

Live Demo

Use Case

Installation

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

Usage

Loading the module in the app 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 {}

Add directives to form elements

add ngxFormValidator directive to form element and add ngxFormSubmit directive to submit button.

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

validatorConfig: NgxValidatorConfig = {
    validationMessages: {
        username: {
            required: '用户名不能为空',
            pattern: '用户名格式不正确，以字母，数字，下划线组成，首字母不能为数字，必须是2-20个字符',
            ngxUniqueCheck: '输入的用户名已经存在，请重新输入'
        }
    },
    validateOn: 'blur' | 'submit'
};

APIs

ngxFormValidator configuration

validatorConfig: NgxValidatorConfig = {
    validationMessages: {
        username: {
            required: 'Username required',
            pattern: 'Username format is incorrect, it consists of letters, numbers and underscores, the first letter cannot be a number. It must be 2-20 characters.',
            ngxUniqueCheck: 'The username entered already exists.'
        }
    },
    validateOn: 'submit'
};

Global configuration

Global configuration can be set by NgxValidatorModule.forRoot(config), or by injecting NgxValidatorLoader service at runtime.

globalValidationMessages default rules as below, priority of ngx-form's validationMessages config is greater than validationMessages, it will use globalValidationMessages when an element doesn't match form config validationMessages or global config validationMessages

{
    required: '该选项不能为空',
    maxlength: '该选项输入值长度不能大于{requiredLength}',
    minlength: '该选项输入值长度不能小于{requiredLength}',
    ngxUniqueCheck: '输入值已经存在，请重新输入',
    email: '输入邮件的格式不正确',
    repeat: '两次输入不一致',
    pattern: '该选项输入格式不正确',
    number: '必须输入数字',
    url: '输入URL格式不正确',
    max: '该选项输入值不能大于{max}',
    min: '该选项输入值不能小于{min}'
};

Extensions

get formValidator by <form #formValidator="ngxFormValidator">

1. formValidator.validator.validateControl(name: string) validate an control individually
2. formValidator.validator.markControlAsError(name: string, errorMessage: string) show error by server's error code for an control

Custom Feedback Strategy

const CUSTOM_INVALID_CLASS = 'custom-invalid';
const CUSTOM_INVALID_FEEDBACK_CLASS = 'custom-invalid-feedback';

export class CustomValidationFeedbackStrategy implements ValidationFeedbackStrategy {
    showError(element: HTMLElement, errorMessages: string[]): void {
        element.classList.add(CUSTOM_INVALID_CLASS);
        // add element show error message
    }

    removeError(element: HTMLElement): void {
        element.classList.remove(CUSTOM_INVALID_CLASS);
       // remove element error message
    }
}

Documentation

• 如何优雅的使用 Angular 表单验证
• Angular 表单验证类库 ngx-validator 1.0 正式发布

Development

$ git clone git@github.com:why520crazy/ngx-validator.git
$ cd ngx-validator
$ npm install
$ npm run start
$ npm run test

Building & Publish

$ npm run build
$ npm run pub

Links

• Angular.io
• Angular.cn
• Worktile.com

License

MIT License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!