Блог

Я пытался найти способ извлечь значение выбранного параметра mat с помощью этого сопряжения html/ts.

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>
 

тс

 formSelect: string;
traType = <any>{};
 

При локальном отображении страницы this.traType.value не поддерживает значение выбранной опции mat. Это выглядит как неопределенное, когда ожидаемый результат будет либо «Регулярным», либо «Единым».

this.traType.value не отображается выбранное значение, так как вы пропускаете [formControl] входную привязку в <mat-select> элементе.

Решение:

Добавьте [FormControl]=»traType» в <mat-select> элемент.

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

Решение в СтекбЛитце

Примечание: Рекомендуется удалить [(ngModel)] привязку, если вы используете [formControl] , поскольку она устарела в Angular v6.

Ссылка

Функции полей формы (пример в формате HTML)