FormArray 和 formGroup 中的 Angular Material mat-select

Posted 2023-03-13

【中文标题】FormArray 和 formGroup 中的 Angular Material mat-select

【英文标题】：Angular Material mat-select in FormArray and formGroup

【发布时间】：2021-04-03 21:14:04

【问题描述】：

我有一个表单组，其中包含 2 个 mat-select 和一个输入字段。在第一组中，我从第一个 mat-select 中选择一个值，因此第二个 mat-select 填充了来自第一个 mat-select 的所选值的数据。然后我从第二个 mat-select 中选择一个值，然后在第三个控件中输入一个值，这是一个简单的输入。然后我按下一个按钮来添加另一个表单组，现在当我从第一个 mat-select 中选择一个值时，前一个 grouparray 中的第二个 mat-select 的值从视图中消失，但是当我检查表单值时，它就在那里。我不明白是什么触发了 tis 事件。谁能帮我找出原因并解决问题。

<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>

【参考方案1】：

问题是您对所有第二个 mat-select 使用相同的变量（您需要使用数组）。

所以想象你定义

productOption:any[]=[];

当您更改供应商时，将索引进一步传递给价值

<mat-select formControlName="supplier"
            (selectionChange)="onSupplierValueChange($event,i)">

onSupplierValueChange(suplierId,index)
   //I imagine you has some like
   this.productOption[index]=this.list.find(x=>x.id=supplierId).options
   //or you call to an API o whatever, but remember you change
   this.productOption[index]=... 

然后在第二个 mat-select 中迭代 this.productOption[i]

<mat-select formControlName="rawmaterialid" ...>
   <mat-option disabled selected hidden>Product</mat-option>
   <mat-option *ngFor="let product_mode of productOption[i]"
           [value]="product_mode.rawmaterialid">
           ....
    </mat-option>
 </mat-select>