Angular 表单考证器

为什么运用考证器?

缘由: 用户输入的数据形形色色,并不老是准确的,假如用户输入了毛病的数据格式,那末我们愿望给他们供应及时准确的回响反映,而且阻挠表单的提交.因而,我们须要考证器来处置惩罚这些状况.

Angular 考证器

1.考证器由Validators模块供应,该模块从’@angular/forms’中导出

import { Validators }from'@angular/forms'

2.运用考证器的要领

// 为FormControl对象指定一个考证器
// 在视图中搜检考证器的状况,并依据返回值做出回响反映
例子1:
    let control = new FormControl('name', Validators.required);
例子2:
    this.myForm = this.fb.group({
        'name': ['', Validators.required]
    });

3.考证器能够考证的信息

// 搜检单个字段的有效性
体式格局一: myForm.controls['name'].hasError('');
体式格局二: myForm.hasError('', 'name');
// 搜检全部表单的有效性
myForm.valid   // 全部formGroup是不是可用
myForm.dirty   // 是不是被修悛改
myForm.touched // 是不是提交过

自定义考证器

1.起首检察Angular源代码,比方Validators.required:

export class Validators {
    static required(c: FormControl): StringMap<string,boolean> {
        return isBlank(c.value) || c.value == '' ? { 'required': true } : null;
    }
}

2.编写自定义考证器

// name必需以'zhou'开首
function nameValidator(control: FormControl): { [s: string]: boolean } {
    if (!control.value.match(/^zhou/)) {
        return { invalidName: true };
    }
}
// 运用要领
this.myForm = this.fb.group({
    'name': ['', [Validators.required, this.nameValidator]]
});