Angular中如何为FormArray内嵌FormGroup的formControl设置默认值与控件状态

一、单选框默认选中失效问题 #

核心原因 #

• 使用响应式表单时，formControlName的状态优先级高于模板绑定的[checked]，同时使用时后者会被直接忽略
• 现有代码中[checked]绑定的是FormControl实例而非控件的布尔值，本身也无法触发选中状态
• 同组单选按钮未设置统一的name属性，无法实现单选互斥逻辑，也会导致选中状态异常

修复方法 #

删除单选框的[checked]绑定，为同组单选框添加统一name属性，选中状态完全交由FormControl控制即可，你已在表单初始化时传入了is_main的值，设置正确后会自动触发选中：

<!-- 修改后的单选框代码 -->
<input
  (change)="changeMain(index)"
  type="radio"
  formControlName="is_main"
  name="mainPhone"
  class="form-control"
  [ngClass]="{
    'is-invalid': item.touched && !item.value
  }"
/>

补充：changeMain方法需要添加其余选项取消选中的逻辑，避免出现多个选中项：

changeMain(activeIndex: number) {
  this.itemsArray.controls.forEach((group, idx) => {
    idx !== activeIndex && group.get('is_main')?.setValue(false);
  });
}

二、文本输入框禁用失效问题 #

核心原因 #

响应式表单禁止直接在模板上绑定disabled属性，该状态必须通过FormControl实例控制，否则会触发Angular警告且状态不生效。

修复方法 #

1. 初始化时默认禁用：创建FormControl时直接配置disabled状态

private _createFormArray(container: Item[]): FormGroup[] {
  return container
    ? container.map((item) => {
        return this.fb.group({
          // 配置项格式为 {value: 控件值, disabled: 是否禁用}
          item: [{value: item.item || '', disabled: true}],
          is_main: item.is_main || false,
        });
      })
    : [
        this.fb.group({
          item: this.placeholder,
          is_main: false,
        }),
      ];
}

2. 动态切换禁用状态：调用FormControl的disable()/enable()方法实现

// 示例：切换指定索引输入框的禁用状态
toggleItemDisable(index: number, isDisabled: boolean) {
  const itemControl = this.itemsArray.at(index).get('item');
  isDisabled ? itemControl?.disable() : itemControl?.enable();
}

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