Как проверить что выбрано в элементе select Angular

Question

Я использую angular/material

import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';

В html имеется элемент выбора

<mat-form-field>
  <mat-label>Select book</mat-label>
    <mat-select [(value)]="newBookId">
      <mat-option [value]="null">no book</mat-option>
      <mat-option *ngFor="book cat of books" [value]="book.id">
        {{book.bookName}}
      </mat-option>
   </mat-select>
</mat-form-field>    

<mat-dialog-actions>  
    <button
       mat-raised-button color="primary"
       [disabled]= ???
    >
      Сохранить
    </button>
</mat-dialog-actions>

Как мне сделать чтобы кнопка "Сохранить" была заблокирована, если в списке выбрано "no book"

Answer 1

Просто проверяйте, есть ли значение value

[disabled]="!value"

<mat-form-field>
  <mat-label>Select book</mat-label>
    <mat-select [(value)]="newBookId">
      <mat-option [value]="null">no book</mat-option>
      <mat-option *ngFor="book cat of books" [value]="book.id">
        {{book.bookName}}
      </mat-option>
   </mat-select>
</mat-form-field>    

<mat-dialog-actions>  
    <button
       mat-raised-button color="primary"
       [disabled]="!value"
    >
      Сохранить
    </button>
</mat-dialog-actions>

БЛОГ НА HUSL

Как проверить что выбрано в элементе select Angular

Ответы (1 шт):