面试题：Angular模板驱动表单重置时处理复杂表单状态

Question

假设在Angular模板驱动表单中有多个嵌套的表单组（FormGroup）和表单控件（FormControl），且部分控件有自定义验证器。当重置表单时，不仅要清空表单值，还要确保所有验证状态也恢复到初始状态，你会如何实现？请详细说明思路及关键代码。

Answer 1

1. 思路：
   • 在Angular中，FormGroup和FormControl都有reset方法。调用FormGroup的reset方法时，它会递归地对所有子FormGroup和FormControl进行重置。
   • 对于自定义验证器，reset方法默认会将验证状态恢复到初始状态，因为它会重新运行验证逻辑。
2. 关键代码：
   • 假设在组件中有一个FormGroup实例，例如在组件的TypeScript代码中：

   import { Component } from '@angular/core';
   import { FormGroup, FormControl, Validators } from '@angular/forms';
   
   function customValidator(control: FormControl) {
     // 自定义验证逻辑
     if (control.value === 'invalidValue') {
       return { customError: true };
     }
     return null;
   }
   
   @Component({
     selector: 'app - my - form',
     templateUrl: './my - form.component.html',
     styleUrls: ['./my - form.component.css']
   })
   export class MyFormComponent {
     myForm: FormGroup;
   
     constructor() {
       this.myForm = new FormGroup({
         innerGroup: new FormGroup({
           control1: new FormControl('', [Validators.required, customValidator])
         })
       });
     }
   
     resetForm() {
       this.myForm.reset();
     }
   }
   

   • 在模板（my - form.component.html）中：

   <form [formGroup]="myForm">
     <div formGroupName="innerGroup">
       <input formControlName="control1">
       <div *ngIf="myForm.get('innerGroup.control1').hasError('required')">This field is required.</div>
       <div *ngIf="myForm.get('innerGroup.control1').hasError('customError')">This is a custom error.</div>
     </div>
     <button (click)="resetForm()">Reset Form</button>
   </form>
   

   当点击“Reset Form”按钮时，resetForm方法会被调用，myForm及其所有子控件的值会被清空，验证状态也会恢复到初始状态。