Angular Material mat-select в FormArray и formGroup

У меня есть группа форм, которая содержит 2 мат-выбора и поле ввода. В первой группе я выбираю значение из первого выбора мата, и, соответственно, второй выбор мата заполняется данными для этого выбранного значения из первого выбора мата. Затем я выбираю значение из второго мат-выбора, а затем ввожу значение в третий элемент управления, который является простым вводом. Затем я нажимаю кнопку, чтобы добавить еще одну группу форм, теперь, когда я выбираю значение из первого мат-выбора, значение второго мат-выбора в предыдущем групповом массиве исчезает из поля зрения, но когда я проверяю значения формы, он есть. Я не понимаю, что вызывает это событие. Может кто-нибудь, пожалуйста, помогите мне найти причину и решить проблему.

<div formArrayName = "rawmaterialwh">
                <div [formGroupName] = "i" *ngFor = "let product of products.controls; let i=index">
                   <legend>{{i+1}}</legend>
                     <div class = "form-group row">
                      <div fxLayout = "row wrap" fxLayoutAlign = "space-between center">
                         <mat-form-field>
                            <mat-select formControlName = "supplier" class = "form-control"
                               (selectionChange) = "onSupplierValueChange($event)" placeholder = "Supplier">
                               <mat-option disabled selected hidden>Supplier</mat-option>
                               <mat-option *ngFor = "let supplier_mode of supplierOption"
                                  [value] = "supplier_mode.supplierid">{{supplier_mode.name}}</mat-option>
                            </mat-select>
                         </mat-form-field>
                      </div>
                   </div>
                   <div class = "form-group row">
                      <div fxLayout = "row wrap" fxLayoutAlign = "space-between center">
                         <mat-form-field>
                            <mat-select formControlName = "rawmaterialid" class = "form-control" placeholder = "Raw Material"
                               (selectionChange) = "onProductValueChange($event)">
                               <mat-option disabled selected hidden>Product</mat-option>
                               <mat-option *ngFor = "let product_mode of productOption"
                                  [value] = "product_mode.rawmaterialid">{{product_mode.rawmaterialname}}</mat-option>
                            </mat-select>
                         </mat-form-field>
                         <div fxFlex.gt-sm = "49" fxFlex.gt-xs = "49" fxFlex = "100">
                            <mat-form-field class = "full-wid mrgn-b-md">
                               <input matInput placeholder = "Quantity" formControlName = "qty" id = "{{ 'qty' + i }}">
                            </mat-form-field>
                         </div>
                         <button *ngIf = "!_isUpdating" class = "mrgn-all-xs" class = "mrgn-all-xs" mat-mini-fab color = "warn"
                            (click) = "deleteProduct(i)">
                            <mat-icon>delete</mat-icon>
                         </button>
                      </div>
                   </div>
                </div>
             </div>