面试题：Angular结合TypeScript实现复杂响应式表单及动态验证的深度剖析

Question

在Angular应用中，需要创建一个复杂的响应式表单，包含多个嵌套的表单组和表单数组，并且每个表单控件都有动态的验证规则（验证规则根据用户的操作和其他表单控件的值实时变化）。请使用TypeScript详细实现该表单的构建过程，包括如何利用TypeScript的类型系统来确保表单数据的正确性和一致性，以及如何优雅地处理验证失败的情况并向用户展示友好的错误提示。同时，阐述这种复杂表单实现背后的设计模式和最佳实践。

Answer 1

1. 表单构建过程

导入必要的模块

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';

创建表单

@Component({
  selector: 'app-complex-form',
  templateUrl: './complex-form.component.html',
  styleUrls: ['./complex-form.component.css']
})
export class ComplexFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      // 顶层表单组
      mainGroup: new FormGroup({
        // 嵌套表单组
        nestedGroup: new FormGroup({
          nestedControl: new FormControl('', [Validators.required])
        }),
        // 表单数组
        formArray: new FormArray([
          new FormControl('', [Validators.required])
        ])
      })
    });
  }

  get formArray(): FormArray {
    return this.myForm.get('mainGroup.formArray') as FormArray;
  }

  addFormArrayControl() {
    this.formArray.push(new FormControl('', [Validators.required]));
  }
}

动态验证规则

@Component({
  selector: 'app-complex-form',
  templateUrl: './complex-form.component.html',
  styleUrls: ['./complex-form.component.css']
})
export class ComplexFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      mainGroup: new FormGroup({
        nestedGroup: new FormGroup({
          nestedControl: new FormControl('', [Validators.required])
        }),
        formArray: new FormArray([
          new FormControl('', [Validators.required])
        ])
      })
    });

    // 动态验证示例：根据另一个表单控件的值改变验证规则
    const nestedControl = this.myForm.get('mainGroup.nestedGroup.nestedControl');
    const anotherControl = new FormControl('');
    anotherControl.valueChanges.subscribe((value) => {
      if (value ==='specificValue') {
        nestedControl.setValidators([Validators.minLength(5)]);
      } else {
        nestedControl.setValidators([Validators.required]);
      }
      nestedControl.updateValueAndValidity();
    });
  }

  get formArray(): FormArray {
    return this.myForm.get('mainGroup.formArray') as FormArray;
  }

  addFormArrayControl() {
    this.formArray.push(new FormControl('', [Validators.required]));
  }
}

2. 利用TypeScript类型系统确保数据正确性和一致性

定义表单数据类型

export interface MainForm {
  mainGroup: {
    nestedGroup: {
      nestedControl: string;
    };
    formArray: string[];
  };
}

使用类型声明

@Component({
  selector: 'app-complex-form',
  templateUrl: './complex-form.component.html',
  styleUrls: ['./complex-form.component.css']
})
export class ComplexFormComponent {
  myForm: FormGroup<MainForm>;

  constructor() {
    this.myForm = new FormGroup<MainForm>({
      mainGroup: new FormGroup({
        nestedGroup: new FormGroup({
          nestedControl: new FormControl('', [Validators.required])
        }),
        formArray: new FormArray([
          new FormControl('', [Validators.required])
        ])
      })
    });
  }

  get formArray(): FormArray {
    return this.myForm.get('mainGroup.formArray') as FormArray;
  }

  addFormArrayControl() {
    this.formArray.push(new FormControl('', [Validators.required]));
  }
}

3. 处理验证失败并展示友好错误提示

在模板中展示错误提示

<form [formGroup]="myForm">
  <div formGroupName="mainGroup">
    <div formGroupName="nestedGroup">
      <input type="text" formControlName="nestedControl">
      <div *ngIf="myForm.get('mainGroup.nestedGroup.nestedControl')?.hasError('required') && (myForm.get('mainGroup.nestedGroup.nestedControl')?.touched || myForm.get('mainGroup.nestedGroup.nestedControl')?.dirty)">
        This field is required.
      </div>
      <div *ngIf="myForm.get('mainGroup.nestedGroup.nestedControl')?.hasError('minLength') && (myForm.get('mainGroup.nestedGroup.nestedControl')?.touched || myForm.get('mainGroup.nestedGroup.nestedControl')?.dirty)">
        This field must be at least 5 characters long.
      </div>
    </div>
    <div formArrayName="formArray">
      <div *ngFor="let control of formArray.controls; let i = index">
        <input type="text" [formControlName]="i">
        <div *ngIf="formArray.controls[i].hasError('required') && (formArray.controls[i].touched || formArray.controls[i].dirty)">
          This field is required.
        </div>
      </div>
      <button type="button" (click)="addFormArrayControl()">Add Control</button>
    </div>
  </div>
</form>

4. 设计模式和最佳实践

设计模式

• 组合模式：使用表单组和表单数组来构建复杂的层次结构，将表单控件组合成树状结构，每个表单组或表单数组都可以看作是一个容器，包含其他表单控件或容器，便于管理和维护。
• 观察者模式：利用 valueChanges 事件来监听表单控件值的变化，从而动态更新验证规则，实现响应式行为。

最佳实践

• 模块化：将表单相关的逻辑封装在一个组件中，便于复用和维护。
• 类型安全：利用TypeScript的类型系统，在编译时检查表单数据的类型，减少运行时错误。
• 动态验证：通过监听用户操作和其他表单控件的值来动态更新验证规则，提供更灵活和智能的用户体验。
• 友好的错误提示：在模板中根据验证错误类型展示清晰易懂的错误提示，帮助用户正确填写表单。