Question

我几乎每天都在处理这个问题。我不明白这是怎么回事。

我在应用程序中使用反应式表单，当我显示创建表单时，它运行良好。

但是，当我尝试显示编辑表单时，总是出现错误：

zone.js：192未捕获的错误：找不到路径为'items-> 0-> content'的控件

我正在用以下代码创建表单：

  createFormGroup() {
    return this.formBuilder.group({
      items: this.formBuilder.array([this.createProductItems()]),
    });
  }

  createProductItems() {
    const productItems = [];
    if (this.sourceProduct) {
      this.sourceProduct.items.forEach(value => {
        productItems.push(this.createProductItem());
      });
    }

    return productItems;
  }

createProductItem方法a定义如下

  createProductItem(): FormGroup {
    return this.formBuilder.group({
      content: ['', [Validators.required]],
      quantity: ['', [Validators.required]]
    });
  }

在我的模板中，我有以下html：

      <div class="form-group row">
        <label class="col-md-1 col-form-label label-main">{{"Items" | translate}}
          <i (click)="addItem()" class="icon-button nb-plus-circled mr-1 fa-3x"></i>
        </label>
        <div class="col-md-9" formArrayName="items">
          <div class="row"
               *ngFor="let item of itemsArray.controls; let i = index;">
            <div [formGroupName]="i" class="product-item-wrapper col-md-12">
              <div class="row mt-2 product-item-row" >
                <input type="text" class="form-control col-md-3 mb-2 ml-1" formControlName="content"
                       placeholder="Content"
                       [(ngModel)]="sourceProduct.items[i].content"
                       name="content">
                <input type="number" class="form-control col-md-2 mb-2 ml-1" formControlName="quantity"
                       placeholder="Quantity"
                       [(ngModel)]="sourceProduct.items[i].quantity"
                       name="quantity">
              </div>
            </div>
          </div>
        </div>
      </div>

我正在使用ngOnInit方法创建表单，我也试图将其移至字段初始化

在这种情况下，sourceProduct变量不可用。

我不知道出什么问题了，请帮助解决该问题。

Answer 1

看来您犯了一个非常小的错误，导致了大问题。在此行上，您将创建一个表单控件数组：

  items: this.formBuilder.array([this.createProductItems()]),

但是，createProductItems()的调用被包装在[]中，因此会产生一个二维数组。

尝试像这样移除括号：

  createFormGroup() {
    return this.formBuilder.group({
      items: this.formBuilder.array(this.createProductItems()),
    });
  }

我想这应该可以解决问题。

zone.js：192未捕获的错误：找不到路径为：项目-> 0->内容的控件

1 个答案: