如何为 Mat-Select 下拉列表动态添加过滤值

Question

请让我知道我应该怎么做才能使 formArray 的每一行都不会更改其他行中已选择值的值？

请注意：动态添加控件并在过滤器中正确获取值是有效的。只有当我更改它时，它才会更改其他下拉列表。谢谢。

我有一个工作 FormArray，只需按一下按钮，就会为其动态添加控件。这些控件有两个下拉菜单，根据第一个下拉菜单的不同，第二个下拉菜单的值会发生变化。

然而当我添加下一个动态控件并更改第二个下拉列表的值时，它也会重置第一个已选择值的值。我正在为这些使用材料<mat-select>。

我的 HTML：

<form [formGroup]="allocationForm" autocomplete="off">
          <div fxLayoutAlign="start center" id="allocationsDiv" class="container row">
            <mat-card-title style="text-align: left;">Models
              <button mat-raised-button class="mat-raised-button-custom" style="padding: 3px;"
                (click)="onAddCars()">Add Cars</button></mat-card-title>

            <ng-container formArrayName="allocationsArray">
              <div *ngFor="let ctrl of allocationControls.controls; let i = index" [formGroupName]="i">
                <mat-form-field appearance="outline" style="width: 250px;padding: 3px;">
                  <mat-label>Car Model</mat-label>
                  <mat-select formControlName="carModel" id="carModel"
                    (selectionChange)="filterCarModel($event, i)">
                    <mat-option *ngFor="let models of distinctModels" [value]="models">{{models}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

                <mat-form-field appearance="outline" style="width: 350px;padding: 3px;">
                  <mat-label>Car Submodel</mat-label>
                  <mat-select formControlName="subModel" id="subModel" (selectionChange)="filtersubModel($event)">
                    <mat-option *ngFor="let subModel of subModels" [value]="subModel.itemValue">
                      {{subModel.displayValue}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </ng-container>

             </div>
</form>

onAddCars() 方法将新控件推送到 allocationsArray

我的 ts：对于 filterCarModel 方法

public filterCarModel(e:any,ind:any)
  {
    let index = <FormArray>this.allocationForm.controls['allocationsArray'];
    var carList = Array.from(new Set(this.productsDTO.filter(x => x.productType === e.value).sort().values()));
    this.subModels = Array<Productdropdown>();
    carList.forEach(productLists => {
      const tempItem = new Productdropdown();
      tempItem.displayValue = productLists["carDescription"]
      tempItem.itemValue = productLists["carCode"]
      this.subModels.push(tempItem);
    });
  }

如何过滤第二个控件值，以不更改代码中 allocationsArray 第一行中已选择的值。 使用角度 7x

onAddCars() 是这样的..

public onAddCars(){
      this.allocationControls.push(this.formBuilder.group({carModel: '',subModel:''}))
  }

您能否告诉我应该怎么做才能使 formArray 的每一行都不会更改其他行中已选择值的值？任何帮助表示赞赏。请注意：动态添加控件并在过滤器中正确获取值有效。只有当我更改它时，它才会更改其他下拉列表。谢谢。

Answer 1

Eliseo..我必须接受你的回答，因为这是我应该遵循的正确方向。下面是我必须更改的代码

<mat-option *ngFor="let subModel of subModels[i]" [value]="subModel.itemValue">
                      {{subModel.displayValue}}
                    </mat-option>

我已经介绍了 subModelsany[][]=[]; 的数组 正如您所指出的，但我设法使用 FormArray 而不是您的解决方案。

Answer 2

你只有一个唯一的变量“subModels”在你的所有表单中使用，所以，你可以这样做。

一种方法是 subModels 是一个或多个数组

//declare subModels as array of any
subModels:any[]=[]
public filterCarModel(e:any,ind:any)
  {
    let index = <FormArray>this.allocationForm.controls['allocationsArray'];
    var carList = Array.from(new Set(this.productsDTO.filter(x => x.productType === e.value).sort().values()));

    //here declare this.subModels[ind] as an array
    this.subModels[ind] = Array<Productdropdown>();

    carList.forEach(productLists => {
      const tempItem = new Productdropdown();
      tempItem.displayValue = productLists["carDescription"]
      tempItem.itemValue = productLists["carCode"]

      //you push the element in this.subModels[ind]
      this.subModels[ind].push(tempItem);
    });
  }

另一种方法是，您的 productList 是包含子元素的数组。想象一下你有一些喜欢

modelList=[{
      id:1,
      model:'Audi',
      submodels:[{id:10,name:'A3'},{id:11,name:'Quatro'}]
      },
      {
      id:2,
      model:'Seat',
      submodels:[{id:20,name:'Ibiza'},{id:21,name:'Panda'},{id:22,name:'Leon'}]
      },
  ]

我想象一个带有模型和子模型的formArray，所以我们做了两个函数

getLine(data:any)
  {
    data=data || {model:'',submodel:''}
    return new FormGroup({
      model:new FormControl(data.model),
      submodel:new FormControl(data.model)
    })

  }
  addLine()
  {
    this.formArray.push(this.getLine(null))
  }

我将在表单中使用一个辅助变量和一个 [ngModel]。看到变量不属于formArray，我用作为辅助，用(ngModelChange)给formArray.get('model')赋值

我的变量

model:any[]=[]

还有.html

<button mat-button (click)="addLine()">Add</button>
<form [formGroup]="formArray">
    <div *ngFor="let group of formArray.controls;let i=index" [formGroup]="group">
        <mat-form-field>
            <mat-label>Model</mat-label>
            <!-- the ngModel is model[i] -->
            <mat-select [ngModel]="model[i]"
             <!--in ngModelChange we equal model[i] to event
                 and give value to group.get('model')-->
             (ngModelChange)="model[i]=$event;group.get('model').setValue($event.id)"
             <!--I need indicate that the ngModel is NOT belong to the form-->
             [ngModelOptions]="{standalone:true}"
             >
               <!--see that value is the "modelo", ALL the object-->
                <mat-option *ngFor="let modelo of modelList" [value]="modelo">
                    {{modelo.model}}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <mat-label>SubModel</mat-label>
            <!--this select use formControlName as ussuall-->
            <mat-select formControlName="submodel">
                <!--here I can use model[i].submodels-->
                <mat-option *ngFor="let submodelo of model[i]?.submodels" [value]="submodelo.id">
                    {{submodelo.name}}
                </mat-option>
            </mat-select>
        </mat-form-field>

    </div>
</form>

你可以在stackblitz看到