Angular表单验证器

为什么使用验证器
用户输入的数据各式各样,并不总是正确的,如果用户输入了错误的数据格式,那么我们希望给他们提供实时正确的反馈,并且阻止表单的提交.因此,我们需要验证器来处理这些情况.
表单验证
Angular支持的内置validate属性：

required- 设置表单控件值是非空的

email – 设置表单控件的格式是email

minlength – 设置表单控件值的最小长度

maxlength – 设置表单控件长度的最大值

pattern – 设置表单控件的值需匹配 pattern 对应的模式

通过表单控件的.valid判断验证结果，其结果状态：

valid – 有效

invalid – 无效

pristine – 表单值未改变

dirty – 表单值已改变

touched – 表单控件已被访问过

untouched- 表单控件未被访问过

Angular验证器 简单实例
1.验证器由Validators模块提供,该模块从’@angular/forms’中导出
import { Validators }from’@angular/forms’

2.使用验证器的方法（实例）
export class AppComponent {

constructor(private fb: FormBuilder) {

}

profileForm = new FormGroup({
userName: new FormControl(”, Validators.required),
password: new FormControl(”, Validators.required),
});

3.效果

最后，提及一下我们团队的黄庭祥，虽然跟我说的时候云里雾里的，但是还是感谢！！！