1、案例需求表单提交，表单全部校验成功才能提交，当表单校验错误，表单边框变红，同时有错误提示信息，有重置功能2、代码分析在线预览git仓库 (clone npm install ng serve)本案例中使用了响应式表单，响应式表单在表单的校验方面非常方便2.1、注册 ReactiveFormsModule要使用响应式表单，就要从 @angular/forms 包中导入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 数组中。app.module.tsimports: [ 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、FormGroupDirectiveformGroup 是一个输入指令，它接受一个 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 表单是否未被访问过以输入姓名的表单为例，只验证该表单的必填项时。表单先获取焦点并且输入姓名，最后移除焦点，每一步表单的状态如下：初始状态 状态值validfalsepristinetruedirtyfalsetouchedfalseuntouchedtrue输入状态 状态值validtruepristinefalsedirtytruetouchedfalseuntouchedtrue失去焦点后状态 状态值validtruepristinefalsedirtytruetouchedtrueuntouchedtrue2.5、表单校验表单验证用于验证用户的输入，以确保其完整和正确。Angular内置的了一些校验器，如 Validators.required， Validators.maxlength，Validators.minlength， Validators.pattern，但是不能自定义错误提示信息，所以实用性不强，满足不了业务场景的需求，于是我们可以自定义表单校验器。自定义表单校验器name-validator.tsimport { 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.tsthis.formGroup = this.fb.group({ name: [’’, nameValidator()], age: [’’, ageValidator()], sex: [’’, sexValidator()] });显示错误提示信息当页面初始化的时候不应该显示错误信息，也就是表单touched为true// Errorprivate errorMessage(name): string { const control = this.formGroup.controls[name]; return (control.touched && control.invalid) ? control.errors.message : ‘’; }然而touched只有失去焦点才为true，在输入的时候一直为false。导致在输入的时候，表单校验错误，却显示不了错误信息。因此需要再次判断 dirty 状态，只要表单值改变，则为falseprivate 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(); } }); }