How to customize validators for Angular2

This article mainly introduces "Angular2 how to customize validators". In daily operation, I believe many people have doubts about how to customize validators in Angular2. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "Angular2 how to customize validators". Next, please follow the editor to study!

Angular when form forms need to be validated, angular comes with a lot of validators, but most of the time they can't meet the business needs, so you need a custom validator.

Define a validator

To define validator, you need to implement ValidatorFn interface.

Source code:

Export interface ValidatorFn {(c: AbstractControl): ValidationErrors | null;}

Receive an AbstractControl and return ValidationErrors or null

ValidationErrors source code

Export declare type ValidationErrors = {[key: string]: any;}

This is actually returning an object of type key value, which is assigned to formControl.errors when the validation information fails.

The written Validator needs to be passed as a parameter when creating the FormControl.

FormControl constructor source code

Export declare class FormControl extends AbstractControl {constructor (formState?: any, validator?: ValidatorFn | ValidatorFn [] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn [] | null)

Here is a simple example (check email address):

Define a method that returns the ValidatorFn interface

Static EMAIL_REG = new RegExp ('\\ w [-\\ w. +] * @ ([A-Za-z0-9] [- A-Za-z0-9] +\.) + [A-Za-z] {2jue 14}') Static email (): ValidatorFn {return (control: AbstractControl): {[key: string]: any} = > {① if (! EMAIL_REG.test (control.value)) {② return {③ errMsg: 'please enter the correct email address'};} return {}; ④};}

The ① method returns an instance of ValidatorFn

② determines whether it conforms to the mailbox regular expression.

If the ③ does not match the return of a ValidationErrors object, the errMsg is output as an error message (you can also add a Boolean as a judgment here)

④ returns an empty object if the verification succeeds

Incoming validator

Email = new FormControl ('', email ())

Template:

{{email.errors.errMsg}}

When the mailbox is not in the correct format, it will say "Please enter the correct email address".

At this point, a simple verifier is complete.

If you want to compare whether the values of the two form are equal, you only need to make some small changes.

Static EMAIL_REG = new RegExp ('\\ w [-\\ w. +] * @ ([A-Za-z0-9] [- A-Za-z0-9] +\.) + [A-Za-z] {2jue 14}') Static email (emailForm: FormControl): ValidatorFn {① return (control: AbstractControl): {[key: string]: any} = > {if (emailForm.value! = = control.value) {return {errMsg: 'please enter the same email address'};} return {};};}

① only needs to pass in another formControl that needs to be compared here.

Email = new FormControl ('', email ()) email2 = new FormControl ('', email (email)) so far, the study on "how to customize validators by Angular2" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!