Angular表单验证器

40次阅读

共计 678 个字符,预计需要花费 2 分钟才能阅读完成。

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

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

正文完
 0