Angular表单验证器

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]]
});