如何在Angular类型化响应式表单中修补FormArray

问题场景 #

在Angular类型化响应式表单中，FormControl的patchValue/setValue可正常使用，并通过onlySelf等选项控制事件与验证触发，但FormArray无法通过这两个方法直接替换数据——尝试传入FormArray实例或其controls数组均无法编译。使用setControl可以替换FormArray，但该方法没有onlySelf选项，无法在替换数据时避免触发复杂验证。

表单定义代码 #

this.form = fb.group<IPersonForm>({
  name: new FormControl<string | null>('bob'),
  phones: new FormArray<FormGroup<IPhoneForm>>([]),
});

FormControl正常操作示例 #

this.form.controls.name.patchValue('Jim', { onlySelf: true, emitEvent: false });

待替换的FormArray创建代码 #

const myPhone = this.fb.group<IPhoneForm>({
  phone: new FormControl<string | null | undefined>('bob')
});
const array = new FormArray<FormGroup<IPhoneForm>>([myPhone]);

编译失败的尝试 #

// 以下写法均无法通过类型检查
// this.form.controls.phones.setValue(array);
// this.form.controls.phones.setValue(array.controls);
// this.form.controls.phones.patchValue(array);
// this.form.controls.phones.patchValue(array.controls);

可用但缺少onlySelf的方法 #

this.form.setControl('phones', array, { emitEvent: false });

解决方案 #

方法1：传入数据数组使用setValue/patchValue #

类型化FormArray的setValue和patchValue接受的是对应的数据类型数组（如IPhoneForm[]），而非FormControl/FormGroup实例。提取新数组的原始数据后传入即可：

// 从新FormArray中提取数据
const phoneData = array.controls.map(ctrl => ctrl.value);
// 替换整个FormArray的值，同时控制验证和事件
this.form.controls.phones.setValue(phoneData, { 
  onlySelf: true, 
  emitEvent: false 
});

若数据结构明确，也可直接构造数据数组，无需提前创建FormArray：

const phoneData = [{ phone: 'bob' }];
this.form.controls.phones.setValue(phoneData, { 
  onlySelf: true, 
  emitEvent: false 
});

方法2：手动清空并添加控件（保留控件实例） #

如果需要直接替换FormArray中的控件实例，可先清空原数组，再逐个添加新控件，全程控制事件和验证触发：

const phonesArray = this.form.controls.phones;
// 清空原有控件，不触发事件和自身验证
phonesArray.clear({ emitEvent: false, onlySelf: true });
// 逐个添加新控件
array.controls.forEach(ctrl => {
  phonesArray.push(ctrl, { emitEvent: false, onlySelf: true });
});
// 若后续需要触发表单验证，可手动调用
// this.form.updateValueAndValidity({ onlySelf: false, emitEvent: true });

原代码编译失败原因 #

类型化FormArray的setValue/patchValue参数要求为数据类型数组，而传入的FormArray实例或FormGroup数组与预期类型不匹配，导致类型检查失败。setControl用于替换控件实例而非更新值，因此没有onlySelf选项。

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