Angular表单验证器

框架

浏览数:786

2018-12-14

为什么使用验证器

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

表单验证

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

clipboard.png

3.效果

clipboard.png

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

原文地址:https://segmentfault.com/a/1190000017370682