formControl在AngularMaterial中的应用

下面的例子是我从角材料中得到的

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

                                    

我看不出第一种情况和第二种情况有什么不同

为什么我要使用mat select和formControl，有人能告诉我一些用例以及我的第一个代码和第二个代码有什么不同吗

---

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

因此，对于第一个示例，您可以使用

toppings.value

---

是实时工作的演示：）

在一个窗体上没有单个窗体控件，通常，我们使用带有多个窗体控件的FormGroup，因此每次使用所有properties@lostcoder，当您使用FormControl时（您可以使用

[FormControl]

或者，如果您有一个FormGroup

formControlName

）所选的值存储在control.value中（您可以看到是否使用html

{{topping.value}}

。此外，您可以使用而不是formControl，

[（ngModel）]=“变量”

并且值存储在变量中。如果您不使用任何东西，您有一个multiselect，但您无法知道您选择了哪些值

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

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