Angular响应式表单中如何设置表单数组内表单控件的值

你的代码错误在于entityNameArray是FormArray类型，不是单个FormGroup，不能直接通过.get('entityNameStartDate')获取控件，必须先定位到FormArray内的具体FormGroup实例，以下是正确的实现方式：

1. 设置FormArray中第一个FormGroup的控件值 #

如果只需要给数组里第一个实体的entityNameStartDate赋值：

setStartDates(e: any) {
  console.log(e);
  // 类型断言确保拿到FormArray，通过索引0获取第一个FormGroup
  (this.leDetailsUpdateForm.get('entityNameArray') as FormArray)
    .at(0)
    .get('entityNameStartDate')
    ?.setValue(e);
}

或者更清晰的分步写法，便于调试：

setStartDates(e: any) {
  console.log(e);
  // 取出FormArray
  const entityNameArray = this.leDetailsUpdateForm.get('entityNameArray') as FormArray;
  // 获取第一个FormGroup
  const firstEntityForm = entityNameArray.at(0) as FormGroup;
  // 给目标控件赋值
  firstEntityForm.get('entityNameStartDate')?.setValue(e);
}

2. 设置FormArray中所有FormGroup的控件值 #

如果需要给数组里所有实体的entityNameStartDate统一赋值：

setStartDates(e: any) {
  console.log(e);
  const entityNameArray = this.leDetailsUpdateForm.get('entityNameArray') as FormArray;
  // 遍历所有FormGroup并赋值
  entityNameArray.controls.forEach(formGroup => {
    formGroup.get('entityNameStartDate')?.setValue(e);
  });
}

3. 优化：添加便捷Getter #

可以在组件中定义一个Getter，简化后续对FormArray的操作：

// 组件内添加Getter
get entityNameArray(): FormArray {
  return this.leDetailsUpdateForm.get('entityNameArray') as FormArray;
}

// 调用时简化代码
setStartDates(e: any) {
  this.entityNameArray.at(0).get('entityNameStartDate')?.setValue(e);
}

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