Angular 5响应式表单报错及新增控件异常问题求助

先来说说你遇到的两个核心问题：初始加载时的控件路径错误，以及添加按钮无法生成新FormGroup实例的问题。

一、解决“Cannot find control with path”错误 #

这个错误的本质是FormGroup的控件结构和你HTML中绑定的formControlName不匹配，具体来看：

1. 你的Amendment模型里的属性是addAmendmentArrayId、memberId，但你最初在createForm()方法里构建的FormGroup用的是addAmendmentGroupId、memberName这类和模型不对应的字段。当你调用setAmendments()用this.fb.group(amendment)基于模型生成FormGroup时，控件名变成了模型的属性名，但HTML里绑定的是模型的属性，而初始的FormArray里的FormGroup却是用的自定义字段，自然会找不到控件路径。
2. 修正方案：确保createForm()里初始化的FormArray的FormGroup结构和Amendment模型完全一致，同时和HTML中的formControlName对应。比如：

createForm() {
  this.form = this.fb.group({
    listType: 0,
    addAmendmentGroups: this.fb.array([
      this.fb.group({
        addAmendmentArrayId: 0,
        listType: 0,
        numberReference: [{ value: 0, disabled: false }, Validators.required],
        whiteListId: [{ value: 0, disabled: true }, Validators.required],
        whiteListReference: [{ value: 0, disabled: true }, Validators.required],
        memberId: [[]] // 模型里memberId是number[]，这里要初始化为数组
      })
    ]),
    foobar: ''
  });
}

注意：模型里的numberReference、whiteListReference要和你HTML里的formControlName对应，之前你HTML里用的numberedListReference是不对的，要改成和模型一致的numberReference。

二、解决添加按钮无法生成新FormGroup实例的问题 #

你现在的addAmendment()方法是this.addAmendmentGroups.push(this.fb.group(new Amendment()));，看起来没问题，但可能因为Amendment类的属性没有默认值，导致生成的FormGroup缺少必要的控件配置（比如验证器、禁用状态）。正确的做法是封装一个创建Amendment FormGroup的方法，确保每次添加的都是结构一致、带有完整配置的新实例：

// 封装创建单个Amendment FormGroup的方法
private createAmendmentFormGroup(amendment?: Amendment): FormGroup {
  // 如果传入amendment就用它的值，否则用默认值
  const data = amendment || {
    addAmendmentArrayId: 0,
    listType: ListType.Numbered,
    numberReference: 0,
    whiteListId: 0,
    whiteListReference: 0,
    memberId: []
  };

  return this.fb.group({
    addAmendmentArrayId: data.addAmendmentArrayId,
    listType: [data.listType],
    numberReference: [{ value: data.numberReference, disabled: data.listType !== ListType.Numbered }, Validators.required],
    whiteListId: [{ value: data.whiteListId, disabled: data.listType !== ListType.White }, Validators.required],
    whiteListReference: [{ value: data.whiteListReference, disabled: data.listType !== ListType.White }, Validators.required],
    memberId: [data.memberId]
  });
}

// 然后修改createForm、setAmendments、addAmendment方法
createForm() {
  this.form = this.fb.group({
    listType: 0,
    addAmendmentGroups: this.fb.array([this.createAmendmentFormGroup()]),
    foobar: ''
  });
}

setAmendments(amendments: Amendment[]) {
  const amendmentFGs = amendments.map(amendment => this.createAmendmentFormGroup(amendment));
  const amendmentFormArray = this.fb.array(amendmentFGs || []);
  this.form.setControl('addAmendmentGroups', amendmentFormArray);
}

addAmendment() {
  this.addAmendmentGroups.push(this.createAmendmentFormGroup());
}

这样每次点击+按钮时，都会调用createAmendmentFormGroup()生成一个全新的、结构完整的FormGroup，而不是直接用new Amendment()生成的空对象。

额外注意点 #

1. 你的memberId在模型里是number[]，但HTML里用的是单个<input type="number" formControlName="memberId" />，这会导致无法正确绑定数组值。如果memberId是多选的，你应该把它改成FormArray，然后用*ngFor渲染多个input；如果是单个值，建议把模型里的memberId改成number类型。
2. 关于单选按钮的切换逻辑，你需要监听listType的变化，动态切换其他控件的禁用状态，比如在组件里添加：

ngOnInit() {
  this.form.get('listType')?.valueChanges.subscribe(type => {
    this.addAmendmentGroups.controls.forEach(group => {
      const numberRefCtrl = group.get('numberReference');
      const whiteListIdCtrl = group.get('whiteListId');
      const whiteListRefCtrl = group.get('whiteListReference');

      if (type === ListType.Numbered) {
        numberRefCtrl?.enable();
        whiteListIdCtrl?.disable();
        whiteListRefCtrl?.disable();
      } else {
        numberRefCtrl?.disable();
        whiteListIdCtrl?.enable();
        whiteListRefCtrl?.enable();
      }
    });
  });
}

这样切换单选按钮时，对应的控件会自动启用/禁用。

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