(Угловой 5) Ошибка: не удается найти элемент управления формы с именем:

Question

Я пытаюсь редактировать форму, и когда я хочу показать значения для редактирования, используя setValue, я получаю сообщение об ошибке " ОШИБКА: ошибка: не удается найти элемент управления формы с именем: покупки. "

component.ts

ngOnInit() {
  this.form = new FormGroup({
      customer: new FormGroup({
        name: new FormControl(),
        lastname: new FormControl(),
        address: new FormControl(),
        phone: new FormControl()
      }),
      createdAt: new FormControl(),
      purchases: new FormArray([])
  });
}

моя функция для редактирования

onEdit(invoice) {    
  this.form.setValue(invoice)   
}

component.html

<div class="col-md-8">
    <div formGroupName="customer">
      <h3>Customer</h3>
      <label>Name: <input class="form-control" type="text" formControlName="name"> </label>
      <label>Last Name:<input class="form-control" type="text" formControlName="lastname"></label>
      <label>Phone:<input class="form-control" type="text" formControlName="phone"></label>
      <label>Address:<input class="form-control" type="text" formControlName="address"></label>
   </div>
   <div><li formArrayName="purchases"></li></div>
</div>

Просмотр в StackBlitz

значения в консоли

Answer 1

Ошибка вызвана вызовом setValue (), поскольку он выполняет строгие проверки.

Вы пытаетесь присвоить массиву из нескольких элементов FormArray, имеющему только одну начальную группу FormGroup с индексом 0.

Присвоить значение по индексу 1 не удается, так как он не существует.

Шаги для его решения:

1. Определить массив форм:

   purchases: new FormArray([
       new FormGroup({
           product: new FormGroup({
               categoryS: new FormControl(''),
               location: new FormControl(''),
               name: new FormControl(''),
               price: new FormControl('')
           }),
           quantity: new FormControl('')
       })
   ])
   

2. Использовать patchValue

3. Очистить массив форм:

   while (purchasesFormArray.length) {
      purchasesFormArray.removeAt(0);
   }
   

4. Заполнить полемассив формы в цикле

   invoice.purchases.forEach(purchase => {
       purchasesFormArray.push(this._fb.group(purchase));
   });  
   

Фиксированный код здесь: Просмотр в StackBlitz .