面试题：Angular响应式表单中动态添加和移除表单控件及验证规则

Question

在一个Angular响应式表单场景下，初始表单有几个基本控件。要求实现：当点击某个按钮时，动态添加一个新的表单控件（如文本框），并为其添加特定的验证规则（如最小长度为5）；当再次点击按钮时，移除这个新添加的控件。请描述实现思路并给出主要代码示例。

Answer 1

实现思路

1. 创建响应式表单：在组件中使用FormGroup和FormControl创建初始表单。
2. 动态添加控件：为按钮添加点击事件处理函数，在函数中使用formGroup.addControl方法添加新的FormControl，并设置验证规则。
3. 动态移除控件：在按钮点击事件处理函数中，当需要移除控件时，使用formGroup.removeControl方法移除指定的控件。

主要代码示例

1. 组件类（.ts 文件）

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent {
  myForm: FormGroup;
  controlName = 'dynamicControl';

  constructor() {
    this.myForm = new FormGroup({
      // 初始表单控件示例
      existingControl: new FormControl('')
    });
  }

  toggleDynamicControl() {
    if (this.myForm.contains(this.controlName)) {
      this.myForm.removeControl(this.controlName);
    } else {
      this.myForm.addControl(this.controlName, new FormControl('', Validators.minLength(5)));
    }
  }
}

2. 模板（.html 文件）

<form [formGroup]="myForm">
  <input formControlName="existingControl" placeholder="Existing Control">
  <button (click)="toggleDynamicControl()">Toggle Dynamic Control</button>
  <input *ngIf="myForm.contains(controlName)" formControlName="dynamicControl" placeholder="Dynamic Control">
</form>