共计 2661 个字符，预计需要花费 7 分钟才能阅读完成。
1、案例需求
表单提交，表单全部校验成功才能提交，当表单校验错误，表单边框变红，同时有错误提示信息，有重置功能
2、代码分析
在线预览
git 仓库 (clone npm install ng serve)
本案例中使用了响应式表单，响应式表单在表单的校验方面非常方便
2.1、注册 ReactiveFormsModule
要使用响应式表单，就要从 @angular/forms 包中导入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 数组中。
app.module.ts
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
]
2.2、使用 FormBuilder 来生成表单控件
当需要与多个表单打交道时，手动创建多个表单控件实例会非常繁琐。FormBuilder 服务提供了一些便捷方法来生成表单控件。FormBuilder 在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。
注入 FormBuilder 服务
constructor(
private fb: FormBuilder
) {}
生成表单控件
FormBuilder 提供了一个语法糖，以简化 FormControl、FormGroup 或 FormArray 实例的创建过程。它会减少构建复杂表单时所需的样板代码的数量（new FormControl）。
formGroup: FormGroup;
this.formGroup = this.fb.group({
name: ”,
age: ”,
sex: ”
});
2.3、FormGroupDirective
formGroup 是一个输入指令，它接受一个 formGroup 实例，它会使用这个 formGroup 实例去匹配 FormControl、FormGroup、FormArray 实例，所以模版中的 formControlName 必须和 formGroup 中的 name 匹配。
<form [formGroup]=”formGroup” (ngSubmit)=”submit()” novalidate>
<div class=”form-group”>
<label> 姓名：</label>
<input type=”text”
formControlName=”name”>
<p>{{nameErrorMessage}}</p>
</div>
</form>
2.4、表单状态
每个表单控件都有自己的状态，共五个状态属性，都是布尔值。
valid 表单值是否有效
pristine 表单值是否未改变
dirty 表单值是否已改变
touched 表单是否已被访问过
untouched 表单是否未被访问过
以输入姓名的表单为例，只验证该表单的必填项时。表单先获取焦点并且输入姓名，最后移除焦点，每一步表单的状态如下：
初始状态
状态
值
valid
false
pristine
true
dirty
false
touched
false
untouched
true
输入状态
状态
值
valid
true
pristine
false
dirty
true
touched
false
untouched
true
失去焦点后状态
状态
值
valid
true
pristine
false
dirty
true
touched
true
untouched
true
2.5、表单校验
表单验证用于验证用户的输入，以确保其完整和正确。Angular 内置的了一些校验器，如 Validators.required，Validators.maxlength，Validators.minlength，Validators.pattern，但是不能自定义错误提示信息，所以实用性不强，满足不了业务场景的需求，于是我们可以自定义表单校验器。
自定义表单校验器
name-validator.ts
import {AbstractControl, ValidatorFn} from ‘@angular/forms’;
export function nameValidator(): ValidatorFn {
return (control: AbstractControl): {[key: string]: any } => {
if (!control.value) {
return {message: ‘ 请输入必选项 ’};
}
if (control.value.length > 10) {
return {message: ‘ 名称大于 10 位了 ’};
}
return null;
};
}
使用自定义验证器
app.component.ts
this.formGroup = this.fb.group({
name: [”, nameValidator()],
age: [”, ageValidator()],
sex: [”, sexValidator()]
});
显示错误提示信息
当页面初始化的时候不应该显示错误信息，也就是表单 touched 为 true
// Error
private errorMessage(name): string {
const control = this.formGroup.controls[name];
return (control.touched && control.invalid) ? control.errors.message : ”;
}
然而 touched 只有失去焦点才为 true，在输入的时候一直为 false。导致在输入的时候，表单校验错误，却显示不了错误信息。因此需要再次判断 dirty 状态，只要表单值改变，则为 false
private errorMessage(name): string {
const control = this.formGroup.controls[name];
return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : ”;
}
2.6、markAsTouched
未对表单操作时，点击提交按钮时，则模拟表单被 touched，显示提示信息
markFormGroupTouched(formGroup: FormGroup) {
Object.values(formGroup.controls).forEach(item => {
if (item.controls) {// 当 formGroup 中存在 formGroup 时，递归
this.markFormGroupTouched(item.controls);
} else {
item.markAsTouched();
}
});
}
