Angular FormArray с динамически добавленными элементами управления

Question

Я начал кодировать Angular 9 не совсем долго go и создаю реактивную форму, которая имеет элементы управления формой, которые добавляются динамически через FormArray Abstract, но всякий раз, когда я пытаюсь l oop через значение Свойство элемента управления formArray, я получаю эту невероятно странную ошибку, которую я пытался выяснить в течение почти 12 часов. Эта ошибка не возникает, когда у меня есть только одна запись массива под узлом значения. Кто-то может указать, что я делаю неправильно?

Вот ошибка:

Это мой конструктор форм:

this.quotationForm = this.fb.group({
      customerId : new FormControl('', Validators.required),
      customerName : new FormControl(),

      'contact' : this.fb.group({
        customerAddress : new FormControl('',Validators.required),
        customerPhone : new FormControl('', Validators.required),
        customerEmail : new FormControl('', Validators.email),
      }),

      'itemsgroup' : new FormArray(
        [
          this.fb.group({
            item : '',
            quantity : '',
            amount : ''
          })
        ],{validators : Validators.required}),

      currency : new FormControl(),
      discount : new FormControl(),
      taxRate : new FormControl(),
      taxAmount : new FormControl(),
      purchase : new FormControl(),
      note : new FormControl(),
      total :new FormControl(),
      ref : new FormControl(),
      tailor : this.usrId,
      datecreated : new FormControl(this.model, Validators.required),
});

Вот вызов функции из моего компонента:

 getSelectedItemsSum(){
    let quotesTotal = 0;
    let itemsgroupAmt = 0;
    let itemsgroupQty = 0;
    let itemsgroup = this.itemsgroup();

    if(itemsgroup.touched == true && itemsgroup.status !== 'INVALID'){
      if(itemsgroup.value.length > 1){
        console.log(itemsgroup.value);
        for(let i = 0; i <= itemsgroup.value.length; i++){

          if((itemsgroup.value[i].amount != '' || itemsgroup.value[i].amount != 0) && (itemsgroup.value[i].quantity != '' || itemsgroup.value[i].quantity != '')){
            itemsgroupAmt += itemsgroup.value[i].amount;
            itemsgroupQty += itemsgroup.value[i].quantity;
          }
        }

        quotesTotal = (itemsgroupAmt * itemsgroupQty);
      }else{
        if((itemsgroup.value[0].amount != '' || itemsgroup.value[0].amount != 0) && (itemsgroup.value[0].quantity != '' || itemsgroup.value[0].quantity != 0))
          quotesTotal = (parseInt(itemsgroup.value[0].amount) * parseInt(itemsgroup.value[0].quantity));
      }
    }else return;

    console.log(itemsgroup)
  }

Это itemsgroup() function

itemsgroup() : FormArray{
    return this.quotationForm.get('itemsgroup') as FormArray;
  }

Фрагмент кода моего html шаблона:

<div formArrayName="itemsgroup" class="row row-xs mb-2">
                <div *ngFor="let group of itemsgroup().controls; let i = index" class="col-xl-12">
                  <div [formGroupName]="i" class="row row-xs mb-2 relative">
                    <div class="col-md-4">
                      <input type="text" formControlName="item" placeholder="Item {{i + 1}}" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                      <input 
                        type="number" 
                        formControlName="quantity" 
                        placeholder="Quantity {{ i + 1 }}" 
                        min="1" step="1" value="1"
                        class="form-control" required>
                    </div>
                    <div class="col-md-4">
                      <input 
                        (change)="getSelectedItemsSum()"
                        type="number" 
                        formControlName="amount" 
                        placeholder="Amount {{ i + 1 }}"  
                        class="form-control" required>
                    </div>
                    <button 
                      (click)="removeItemGroup(i)"
                      *ngIf="(i >= 1)"
                      mat-fab 
                      mat-stroked-button 
                      color="primary" 
                      matTooltip="Delete Item Group" 
                      style="position:absolute;right:7px;top:17px;width:22px;height:22px;">
                      <i style="position:absolute;top:5px;left:8px">*</i>
                    </button>
                  </div>
                </div>
              </div>

Вот моя форма (усеченная):

Answer 1

Пожалуйста, измените let i = 1 вместо let i = 0, потому что вы используете менее чем равное i<=itemgroup.value.length для l oop.

Измените условия l oop как показано ниже,

for (let i = 1; i <= itemgroup.value.length; i++)
{    

// your code

}

или

for (let i = 0; i < itemgroup.value.length; i++)
{    

  // your code

}

Answer 2

1. измените имя метода itemsgroup(), у вашего метода и массива formArray одинаковые имена.

2. при смене шаблона <div *ngFor="let group of itemsgroup().controls; let i = index" class="col-xl-12"> на

   <div *ngFor="let group of quotationForm.get('itemsgroup').controls; let i = index" class="col-xl-12">
   

Несвязанное предложение

Вместо события change для элементов управления в шаблонах. Вам лучше использовать valueChanges observable, предоставляемый FormControl, так что вы будете делать это более "Angular way".