Angular 找不到带路径的控件

Question

我正在尝试使用 formArray 构建一个嵌套的反应式表单，但出现错误：'Cannot find control with path'，如果数组中只有一个项目，它工作正常，但如果有超过 1 个，它 returns错误。我做错了什么？

ngfor 中的 carPartCategories 只是我从服务器获取的数据。

    <form [formGroup]="updateEstimation">
      <ng-container formArrayName="carPartStatus">
        <ng-container *ngFor="let i of carPartCategories; let j = index;">
            <ng-container [formGroupName]="j">
              <div class="content-desc mt-4 mb-5">
                <div class="row mt-4 parts-row align-items-center">
                  <div class="col-lg-2">
                    <span class="p-2 nusx">
                      {{i.carPartCategory}}
                    </span>
                  </div>
                  <div class="col-lg-3">
                    <span class="p-2 nusx">
                      {{i.carPartSubCategory}}
                    </span>
                  </div>
                  <div class="col-lg-2">
                    <span class="p-2 nusx">
                      <mat-form-field appearance="fill">
                        <mat-label>choose</mat-label>
                        <mat-select formControlName="status">
                          <mat-option>
                            test
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                    </span>
                  </div>
                  <div class="col-lg-2">
                    <span class="p-2 nusx">
                      X{{i.quantity}}
                    </span>
                  </div>
                  <div class="col-lg-2 price">
                    <input type="text" placeholder="price" class="form-control" formControlName="price">
                  </div>
                </div>
              </div>
              <div class="comment mt-4 mb-5" *ngIf="i.comment">
                <p class="mtav">comment</p>
                <p class="nusx">{{i.comment}}</p>
              </div>
              <hr>
            </ng-container>
          </ng-container>
        </ng-container>
       </form>

.ts

      this.updateEstimation = this.fb.group({
        carPartStatus: new FormArray([
          new FormGroup({
            status: new FormControl(''),
            price: new FormControl('')
          })
        ])
      });

堆栈闪电战： https://stackblitz.com/edit/angular-10-material-reactive-form-starter-bc7hd4?file=src/app/app.component.ts

Answer 1

发生这种情况是因为您仅在 FormArray 下添加了一个项目，并循环遍历另一个数组 carPartCategories 来呈现这些项目。

对于 carPartCategories 数组中的每一项，carPartStatus 的 FormArray 应包含一项作为 FormGroup，并始终保持 FormArray通过 adding/removing 控件与您的原始数组同步。

您可以尝试以下操作：

// prop represents the `carPartStatus` control
carPartStatusCtrl: FormArray;

//...


this.carPartStatusCtrl = this.createFormArray(carPartCategories);

this.updateEstimation = this.fb.group({
  carPartStatus: this.carPartStatusCtrl,
});

// ...

// Create a `FormArray` from the provided array:
createFormArray(origin: CarPartCategories[]) {
  return new FormArray(
    origin.map(
      (item) =>
        new FormGroup({
          status: new FormControl(item.status),
          price: new FormControl(item.price),
        })
    )
  );
}

对原数组的每一次改变都应该反映到FormArray中，例如，如果你在原数组中添加了一个新的项目，那么一个新的项目应该被添加到FormArray之类的以下：

appendNewItem(item: CarPartCategories): void {
  this.carPartStatusCtrl.push(
    new FormGroup({
      status: new FormControl(item.status),
      price: new FormControl(item.price),
    })
  );
}

更新

根据您的 StackBlitz，您从 HTTP 请求中接收到原始数组，但您初始化了 updateEstimation form-group 而没有等待 return 结果，因此在这种情况下，您的 FromArray 将不包含任何项目，因为 carPartCategories 仍然是空的。

要解决此问题，您必须：

要么将 updateEstimation 初始化移动到 subscribe 函数内（并且在初始化 updateEstimation 之前不要渲染模板，方法是在 form 元素).
或者使用我上面在解决方案中提到的 appendNewItem 函数接收数据后，将新项目附加到 carPartStatusCtrl form-array。

Angular 找不到带路径的控件

Angular Cannot find control with path

angular

typescript

angular-reactive-forms

angular-forms

更新