Angular Reactive Form如何实现FormArray内复选框仅单选一个

• 直接修改this.form.value.referentials的属性无效：form.value是表单状态的只读快照，修改它并不会同步更新底层FormControl的真实值，也无法触发视图刷新
• 你之前调用过this.form.disable()禁用表单，默认修改禁用表单的控件值需要正确调用表单API才能生效
• 如果你之前尝试patchValue时操作的是form.value的对象，同样会无效，必须直接操作表单控件实例

直接操作表单数组的控件实例修改值即可，修改后的onChange逻辑如下：

public onChange(i: number): void {
  this.referentialArray.controls.forEach((formGroup: FormGroup, index: number) => {
    // 非当前选中的行，把default复选框设为未选中
    if (index !== i) {
      formGroup.get('default')?.setValue(false, { emitEvent: false, onlySelf: true });
    }
  });
}

代码说明 #

• 直接调用FormControl的setValue/patchValue方法修改值，才会同步更新表单状态和视图
• 参数{ emitEvent: false }用于避免修改其他复选框时重复触发change事件，减少不必要的逻辑执行
• 参数onlySelf: true适配表单禁用状态下的赋值需求，不会触发表单整体的状态更新
• 如果需要支持取消当前选中的默认项，不需要额外修改逻辑，Angular会自动处理当前点击行的复选框切换

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