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.效果

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