在AngularMaterial中的mat-select内使用formControl

编程问答 2022-08-16

问题描述

我从Angular材质中获取了以下示例

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

2）这是没有formControl的第二段代码

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select  multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

ts-code 

export class SelectMultipleExample {
  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese','Mushroom','Onion','Pepperoni','Sausage','Tomato'];
}

  1. 我看不到第一种情况和第二种情况的任何区别

  2. 为什么我甚至应该将mat-select与formControl一起使用，谁能让我知道一些用例以及我的第一个代码与第二个代码有何不同

解决方法

区别在于，在一般情况下，您需要从MatSelect中选择一个值，在这种情况下，第二个示例代码将失败（您需要一个额外的变量来保存选择的值）

因此，在第一个示例中，您可以轻松地使用

获取选定的值

toppings.value

Here是有效的演示程序：）

angularangularangular-materialform-control