Angular7学习之路-2019/7/4

一:Angular7中的表单验证

　　Angular7中有一个验证表单的服务，在需要验证的component中引入　import { FormBuilder , FormGroup , Validators } from '@angular/forms';

　　FormGroup ： 1.FormControl 值聚合而成 2.key 是每个控件名

　　　　public validateForm: FormGroup;  //声明一个表单

 

　　Validators  ：  验证器 内置校验（required，minlength，maxlength，pattern）

　　　　　　　　自定义验证器:

　　　　　　　　　　1.定义一个返回 ValidatorFn 接口的方法

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

　　　　　　　　　　　　static email(): ValidatorFn {
　　　　　　　　　　　　　　return (control: AbstractControl): { [key: string]: any } => {    //方法返回 ValidatorFn 的实例
　　　　　　　　　　　　　　　　if (!EMAIL_REG.test(control.value)) { 　　　　　　　　//判断是否符合邮箱正则表达式
　　　　　　　　　　　　　　　　　　return { 
　　　　　　　　　　　　　　　　　　　　errMsg: '请输入正确的邮箱地址'　　　　　　//如果不符合 返回一个 ValidationErrors 对象，errMsg 作为错误信息输出 （这里也可以再加一个 布尔型的作为判断）
　　　　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　return {}; 　　　　　　　　　　　　　　　　　　　　//如果校验成功返回一个空的对象
　　　　　　　　　　　　　　};
　　　　　　　　　　　　}

　　　　　　　　　　2.传入校验器　　email = new FormControl('', email())

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

　　FormBuilder：表单服务，在constructor(private fb: FormBuilder) { }中注入，常用方法group（）初始化表单；

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

　　　　});

　　　　这里，每个控件名对应的值都是一个数组，这个数组中的第一项是其初始值。你可以只使用初始值来定义控件，但是如果你的控件还需要同步或异步验证器，

　　　　那就在这个数组中的第二项和第三项提供同步和异步验证器

　　

　　之后就是在html页面加上表单:

　　　　我用的是 NH-ZORRO

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

　　　　

　　　　

　　　　坚持就是胜利!!!