angular - 多个错误 - formGroup 需要一个 FormGroup 实例 - 表单工作正常，但控制台中显示多个错误

Question

我有一个在延迟 3 秒后可以完美运行的表格。在这 3 秒内，表格中填满了 15 条记录中的多个错误

formGroup expects a FormGroup instance. Please pass one

Cannot read property 'get' of undefined

我的理解是，表单填充是基于 API 调用成功并返回响应的事实。虽然响应不存在，但表单未定义，因此出现错误。

问题：如何摆脱这个问题以及最好的方法

HTML 模板

  <div [formGroup]="productForm">
        <div class="r-package-list" formArrayName="packages">
          <div
            class="r-package-list-item"
            *ngFor="let package of packageForms.controls; let i = index"
            [formGroupName]="i"
          >
            <div class="formArrayControlDiv">
              <label class="Package-Name-Label"
                ><input
                  type="checkbox"
                  class="Package-Selection-Checkbox"
                  formControlName="packageCheckBox"
                />
              </label>
              <input
                type="number"
                formControlName="packageQuantity"
              />
              <input
                readonly
                type="text"
                formControlName="packagePrice"
              />
            </div>
          </div>
        </div>
      </div>

TS 文件

  ngOnInit() {

    this.apiService.getPackages(id).then((result: any) => {
        this.createForm(result.data);
      });

  }


  // Creating a Product Form
  createForm(data) {
    const arr = [];

    for (let i = 0; i < data.length; i++) {
      arr.push(this.packageArrayFunction(data[i]));
    }

    this.productForm = this.fb.group({
      packages: this.fb.array(arr)
    });
  }

  // Creating a Dynamic Package Array
  packageArrayFunction(packages): FormGroup {
    return this.fb.group({
      packageCheckBox: [false],
      packageQuantity: [''],
      packagePrice: [packages.basic_price + '/' + packages.base_unit]
    });
  }

  get packageForms() {
    return this.productForm.get('packages') as FormArray;
  }

标签： angularformsdynamic-forms