Angular Material：使用反应形式选择对象选择的多个默认值答案

【问题标题】：Angular Material: mat-select multiple default value for object selection using reactive formsAngular Material：使用反应形式选择对象选择的多个默认值
【发布时间】：2020-06-07 02:24:50
【问题描述】：

我正在使用反应形式和角度材料 mat-select 创建一个表单，并启用多项选择。我有一个要在 mat select 中加载的对象列表，并希望在默认情况下预先选择该列表中的一些项目。

默认选择适用于字符串（下例中的苏打水），默认项目显示为选中图标，并且垫选择元素值已加载它们，如果我添加更多项目，它们将添加到现有项目中值字段。

但是我想在 mat select 中加载的项目是对象（下例中的 energyDrinks），当我为 mat select 字段设置值时，即使字段值设置正确，默认情况下它也不会检查它们。此外，如果我添加一个项目，值字段中的现有数据将被新项目覆盖。

有什么方法可以让我在 UI 选择框中选中预先选择的项目，并让新添加的项目添加 mat-select 元素的现有值？

提前致谢

下面是示例代码 -

html -

<form [formGroup]="drinkCategory">

<mat-form-field class="full-width">
    <mat-select multiple formControlName="sodaName">
        <mat-option *ngFor="let soda of sodaList" [value]="soda">
            {{soda}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{drinkCategory.get('sodaName').value | json}}</p>


<mat-form-field class="full-width">
    <mat-select multiple formControlName="energyDrinkName">
        <mat-option *ngFor="let energyDrink of energyDrinksList" [value]="energyDrink">
            {{energyDrink.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>{{drinkCategory.get('energyDrinkName').value | json}}</p>
</form>

ts 文件 -

import { Component , ViewChild} from '@angular/core';
import { FormBuilder, FormGroup,FormControl,Validators } from '@angular/forms';

@Component({
  selector: 'drink-example',
  styleUrls: ['drink-example.css'],
  templateUrl: 'drink-example.html',
})
export class DrinkExample {
  drinkCategory: FormGroup;

sodaList =['coke','pepsi','sprite'];
selecteSodas =['coke','sprite'];

  energyDrinksList=[{
    id:'1',
    name:'redbull'
  },{
    id:'2',
    name:'monster'
  },{
    id:'3',
    name:'gatorade'
  }];
   selectedEnergyDrinks=[{
      id:'1',
    name:'redbull'
  }];

  constructor(private fb: FormBuilder){}

  ngOnInit() {

        this.drinkCategory = this.fb.group({
            sodaName: [null, Validators.required],
      energyDrinkName:[null, Validators.required]
        });
      this.drinkCategory.get('sodaName').setValue(this.selecteSodas);
      this.drinkCategory.get('energyDrinkName').setValue(this.selectedEnergyDrinks);
    }
}

UI Screenshot of the mat select elements

【问题讨论】：

能否为您的问题创建一个堆栈闪电战。

标签： angular angular-reactive-forms mat-form-field

【解决方案1】：

您需要使用compareWith 函数按id 比较选项。

将函数添加到组件中：

compareWith(drink1: any, drink2: any): boolean {
 return drink1 && drink2 && drink1.id === drink2.id;
}

然后将其设置为两个 MatSelect 控件上的 compareWith 值：

 <form [formGroup]="drinkCategory">
  <mat-form-field class="full-width">
    <mat-select multiple formControlName="sodaName" [compareWith]="compareWith">
      <mat-option *ngFor="let soda of sodaList" [value]="soda">
        {{ soda }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <p>{{ drinkCategory.get('sodaName').value | json }}</p>

  <mat-form-field class="full-width">
    <mat-select
      multiple
      formControlName="energyDrinkName"
      [compareWith]="compareWith"
    >
      <mat-option
        *ngFor="let energyDrink of energyDrinksList"
        [value]="energyDrink"
      >
        {{ energyDrink.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <p>{{ drinkCategory.get('energyDrinkName').value | json }}</p>
</form>

【讨论】：