Angular 2+中如何更新FormArray内的FormControl？

我来帮你搞定这个问题～你遇到的核心问题其实是类型断言的问题，因为默认情况下Angular表单的controls返回的是AbstractControl类型，而setControl是FormGroup独有的方法，所以需要明确断言类型才能正常调用。

下面是正确的实现步骤：

1. 正确获取FormArray并断言类型 #

首先要确保你拿到的是FormArray类型的实例，而不是抽象的AbstractControl：

const myFormArray = form.get('myFormArrayControl') as FormArray;

或者如果你更习惯用controls属性：

const myFormArray = form.controls.myFormArrayControl as FormArray;

2. 获取目标FormGroup并断言类型 #

从FormArray中拿到第一个FormGroup时，同样需要断言成FormGroup类型：

const firstFormGroup = myFormArray.at(0) as FormGroup;

这里推荐用at(index)方法，比直接访问controls[index]更符合Angular表单API的规范，也更安全。

3. 更新FormControl #

现在你就可以正常调用setControl来替换目标控件了：

firstFormGroup.setControl('happyControl', new FormControl('sad value', Validators.minlength(2)));

额外技巧：如果只是更新值/验证器，不用替换整个控件 #

如果你不需要替换整个FormControl实例，只是想更新它的值或者验证器，可以用更轻量的方式：

• 更新值：

firstFormGroup.patchValue({
  happyControl: 'sad value'
});

• 更新验证器：

const happyControl = firstFormGroup.get('happyControl') as FormControl;
happyControl.setValidators(Validators.minlength(2));
happyControl.updateValueAndValidity(); // 记得更新验证状态

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