zone.js: 192 Uncaught Ошибка: не удается найти элемент управления с путем: элементы -> 0 -> содержимое

Question

Я занимаюсь этим вопросом почти сутки. Я не могу понять, что с ним не так.

Я использую реактивные формы в своем приложении, и когда я отображаю форму создания, она работает хорошо.

Однако, когда я пытаюсь отобразить форму редактированияЯ всегда получаю сообщение об ошибке:

zone.js: 192 Uncaught Ошибка: не удается найти элемент управления с путем: '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()),
    });
  }

Я думаю, это должно решить проблему.