Road Angular7 learning -2019/7/4

Form validation in Angular7: a

　　Angular7 in a form validation service, is introduced import {FormBuilder, FormGroup, Validators} from '@ angular / forms' authentication is required in the component;

　　FormGroup: 1.FormControl polymerization 2.key value is the name of each control

　　　　public validateForm: FormGroup; // declare a form

 

　　Validators: validator include the check (required, minlength, maxlength, pattern)

　　　　　　　　Custom validator:

　　　　　　　　　　1. A method a defined interface returns ValidatorFn

　　　　　　　　　　　　 static EMAIL_REG = new RegExp ( "\\ and [- \\ w. +] * @ ([A-Za-z0-9] [- A-Za-z0-9] + \.) + [A-ZA- of] {2,14} ');

　　　　　　　　　　　　In Email static (): ValidatorFn {
　　　　　　　　　　　　　　return (Control: AbstractControl): {[Key: String]: the any} => {// return ValidatorFn method of Example
　　　　　　　　　　　　　　　　(! EMAIL_REG.test (control.value)) if {// determines whether regular expressions conform mailbox
　　　　　　　　　　　　　　　　　　return { 
　　　　　　　　　　　　　　　　　　　　errMsg an: 'Please input the correct email address' // If not a return ValidationErrors objects, errMsg as the error information output (here may also be combined with a determination as Boolean)
　　　　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　return { }; // If the verification succeeds returns a null object
　　　　　　　　　　　　　　};
　　　　　　　　　　　　}

　　　　　　　　　　2 = Incoming checker In Email new new the FormControl ( '', In Email ())

　　　　　　　　　　　模板: <p *ngIf = "!email.valid && email.touched">{{email.errors.errMsg}}</p>

 

　　FormBuilder: forms service, the constructor (private fb: FormBuilder) {} injected, a common method group () to initialize the form;

　　　　this.validateForm = this.fb.group({

　　　　　　selectedValuethree: [null, [Validators.required]],

　　　　　　manager: [null],

　　　　　　contact: [null, [Validators.required, Validators.pattern(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/)]],

　　　　　　email: [null, [Validators.required, Validators.pattern(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)]],

 

　　　　　　address: [null],

　　　　});

　　　　Here, the control value corresponding to each name is an array, the first entry in this array is the initial value. You can only use the initial value to define the controls, but if you need to control synchronous or asynchronous validator,

　　　　Then the second and third terms provides synchronous and asynchronous validation in this array

　　

　　After that is html page plus form:

　　　　I use the NH-ZORRO

　　　　<form nz-form [formGroup]="validateForm">

　　　　

　　　　

　　　　Persevering !!!