Angular 14响应式表单addControl方法无法使用的问题咨询

Angular 14引入了表单强类型校验，当尝试给FormGroup动态添加未预先声明的控件时，TypeScript会抛出类型不匹配的错误。以下是几种可行的解决方式：

1. 预先声明包含可选控件的类型 #

通过定义接口明确FormGroup的结构，将动态添加的控件标记为可选属性，让TypeScript识别这些键的合法性：

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

interface MyFormStructure {
  requestReference: FormControl<string>;
  emailRecipient: FormControl<string | null>;
  emailBodyMessage: FormControl<string>;
  requestDetails: FormControl<string>;
  termsOfAgreement?: FormControl<string>; // 标记为可选的动态控件
}

private test_formGroup() {
  const formGroup = new FormGroup<MyFormStructure>({
    requestReference: new FormControl(''),
    emailRecipient: new FormControl('', [Validators.required, Validators.email]),
    emailBodyMessage: new FormControl('', Validators.required),
    requestDetails: new FormControl(''),
  });

  if (true) {
    // 此时addControl不再触发类型错误
    formGroup.addControl('termsOfAgreement', new FormControl(''));
  }
}

2. 使用松散类型的FormGroup #

如果无法预先知晓所有可能的控件，可以直接指定FormGroup为松散类型，绕过强类型校验：

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

private test_formGroup() {
  const formGroup = new FormGroup<{[key: string]: AbstractControl<any, any>}>({
    requestReference: new FormControl(''),
    emailRecipient: new FormControl('', [Validators.required, Validators.email]),
    emailBodyMessage: new FormControl('', Validators.required),
    requestDetails: new FormControl(''),
  });

  if (true) {
    formGroup.addControl('termsOfAgreement', new FormControl(''));
  }
}

3. 结合FormBuilder使用强类型 #

若习惯用FormBuilder创建表单，同样可以指定包含可选控件的类型：

import { FormBuilder, FormGroup } from '@angular/forms';

// 注入FormBuilder
constructor(private fb: FormBuilder) {}

private test_formGroup() {
  const formGroup = this.fb.group<MyFormStructure>({
    requestReference: [''],
    emailRecipient: ['', [Validators.required, Validators.email]],
    emailBodyMessage: ['', Validators.required],
    requestDetails: [''],
  });

  if (true) {
    formGroup.addControl('termsOfAgreement', this.fb.control(''));
  }
}

报错原因与addControl的意义 #

Angular 14的表单强类型机制会根据初始化时的控件自动推断FormGroup的类型，后续添加的控件必须属于该类型的键（可选键也允许）。addControl的意义在于：当预先声明了可选控件时，可以在运行时根据条件动态创建并添加控件（而非初始化时就创建所有可能的控件），或者在松散类型场景下灵活扩展表单结构。

内容的提问来源于stack exchange，提问作者Dragos Stoica