面试题：Angular响应式表单表单组与表单控件的动态操作

Question

在Angular响应式表单中，当某个表单控件的值发生变化时，需要动态地添加或移除表单组中的另一个表单控件，应该如何实现？请详细说明实现思路并给出关键代码片段。

Answer 1

实现思路

1. 首先，在组件的TypeScript代码中获取表单组和需要监听的表单控件实例。
2. 使用valueChanges 事件来监听特定表单控件的值变化。
3. 在值变化的回调函数中，根据当前值决定是否添加或移除另一个表单控件。添加或移除表单控件可以使用表单组的 addControl 和 removeControl 方法。
4. 确保在模板中正确绑定表单，以便UI能够反映出表单结构的变化。

关键代码片段

1. 组件的TypeScript代码

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;

  constructor() {
    this.myForm = new FormGroup({
      controlToWatch: new FormControl('', Validators.required),
      // 初始时可能不存在要动态添加/移除的控件
    });

    const controlToWatch = this.myForm.get('controlToWatch');
    controlToWatch.valueChanges.subscribe((value) => {
      const dynamicControl = this.myForm.get('dynamicControl');
      if (value === 'someValue') {
        if (!dynamicControl) {
          this.myForm.addControl('dynamicControl', new FormControl('', Validators.required));
        }
      } else {
        if (dynamicControl) {
          this.myForm.removeControl('dynamicControl');
        }
      }
    });
  }
}

2. 组件的HTML模板代码

<form [formGroup]="myForm">
  <input formControlName="controlToWatch" placeholder="输入值以触发动态变化">

  <!-- 动态表单控件 -->
  <input formControlName="dynamicControl" *ngIf="myForm.get('dynamicControl')" placeholder="动态添加/移除的控件">

  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>