在Angular 2/4/5的FormArray中如何为子组内的项设置控件(setControl)

嘿，我来帮你搞定这个问题！针对你给出的表单结构（profile组下应该嵌套着sport这类FormArray吧？），咱们一步步来操作：

第一步：定位到目标FormArray #

首先得层层获取到你要操作的FormArray，比如如果sport是嵌套在profile这个FormGroup里的，先把它们拿到手：

// 获取外层的profile FormGroup
const profileGroup = this.form.get('profile') as FormGroup;
// 获取profile里的目标FormArray（比如sport）
const sportArray = profileGroup.get('sport') as FormArray;

第二步：修改指定子组的控件 #

假设你要修改FormArray中指定索引的子组里的某个控件，比如替换第0个sport项的name控件（给它加新的验证规则）：

// 获取数组中第0个元素（FormGroup类型）
const targetSportItem = sportArray.at(0) as FormGroup;
// 使用setControl替换原控件，自定义初始值和验证器
targetSportItem.setControl(
  'name', 
  new FormControl('篮球', [Validators.required, Validators.minLength(2)])
);

批量修改所有子组的控件 #

如果需要给FormArray里的每一个子组都替换某个控件，可以用循环遍历：

sportArray.controls.forEach((item: FormGroup) => {
  // 给每个sport子组的level控件替换成带验证器的新控件
  item.setControl(
    'level', 
    new FormControl('专业', Validators.required)
  );
});

小提醒：别搞混setControl和setValue/patchValue #

• setControl是替换整个控件实例，包括它的验证规则、状态等；
• 如果只是要修改控件的值，用setValue或patchValue更高效，比如：

  targetSportItem.patchValue({ name: '羽毛球' });
  

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