Angular中如何在动态FormArray内使用patchValue？

问题原因 #

第二个案例里的addCustom方法中，patchValue的路径写错了。type控件并不在顶层的FormGroup中，而是嵌套在contact这个FormArray的子FormGroup里，直接指定{type: ...}找不到对应的控件，所以设置无效。

解决方案 #

1. 添加FormArray的Getter（简化调用）

在组件类里添加一个getter，快速获取contact这个FormArray：

get contact(): FormArray {
  return this.entityInfoForm.get('contact') as FormArray;
}

2. 修改addCustom方法（两种可选方式）

方式一：通过正确嵌套路径使用patchValue

如果要设置第一个联系人条目的下拉框值：

addCustom(v: string) {
  this.items.push(v);
  this.entityInfoForm.patchValue({
    contact: [
      { type: v }
    ]
  });
}

如果要设置所有联系人条目的下拉框值：

addCustom(v: string) {
  this.items.push(v);
  this.contact.controls.forEach(group => {
    (group as FormGroup).patchValue({ type: v });
  });
}

方式二：直接定位目标FormControl设置值

这种方式更直观，直接找到FormArray里指定位置的type控件：

addCustom(v: string) {
  this.items.push(v);
  // 获取第一个联系人的FormGroup
  const firstContactGroup = this.contact.at(0) as FormGroup;
  // 设置type控件的值
  firstContactGroup.get('type')?.setValue(v);
}

修改后的完整组件代码 #

export class AppComponent {
  entityInfoForm: FormGroup;
  items = ['Mobile', 'Home', 'School'];

  get contact(): FormArray {
    return this.entityInfoForm.get('contact') as FormArray;
  }

  constructor() {
    this.entityInfoForm = new FormGroup({
       name: new FormControl(""),
       contact: new FormArray([
           new FormGroup({
                type: new FormControl(''),
                contact: new FormControl('')
           })
       ])
    });
  }

  addCustom(v: string) {
    this.items.push(v);
    // 示例使用方式二
    const firstContactGroup = this.contact.at(0) as FormGroup;
    firstContactGroup.get('type')?.setValue(v);
  }

  onSubmit() {
     console.log(this.entityInfoForm);
  }
}

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