如何获得选择的垫子选项的价值？

Posted 2023-03-13

【中文标题】如何获得选择的垫子选项的价值？

【英文标题】：How to get value of mat-option selected?

【发布时间】：2021-09-10 07:51:08

【问题描述】：

我一直在尝试找到一种方法来使用这种 html/ts 配对来提取所选 mat-option 的值。

html

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>TRA Type</mat-label>
  <mat-select
    placeholder="TRA Type"
    id="traType"
    name="traType"
    data-qa="new-tra"
    [(ngModel)]="formSelect"
    required>
      <mat-option id="Regular" name="Regular" value="Regular">Regular</mat-option>
      <mat-option id="Unitary" name="Unitary" value="Unitary">Unitary</mat-option>
  </mat-select>
  <mat-hint>Required</mat-hint>
</mat-form-field>

ts

formSelect: string;
traType = <any>;

在本地支持页面时，this.traType.value 不会支持所选 mat-option 的值。当预期结果是“Regular”或“Unitary”时，它会显示为未定义。

【问题讨论】：

仅供参考，angularjs 和 angular 是两个不同的框架。请从您的标题中删除 Angular JS 字样。

【参考方案1】：

this.traType.value 不显示所选值，因为您错过了[formControl] <mat-select> 元素中的输入绑定。

解决方案：

在<mat-select> 元素中添加 [formControl]="traType"。

<mat-select placeholder="TRA Type" 
  id="traType" 
  name="traType" 
  [formControl]="traType" 
  data-qa="new-tra" 
  required>
  ..
</mat-select>

Solution in StackBlitz

注意：如果您将[formControl] 用作it has been deprecated in Angular v6，建议您删除[(ngModel)] 绑定。

---

参考

Form field features (Sample in HTML)