当Angular中的下拉列表为空时如何禁用按钮？

Question

我想检查下拉菜单是否为空。 如果不为空，请启用提交按钮。 如果为空，则禁用提交按钮。 下面是我的html

<form  [formGroup]="addTaskForm"  (ngSubmit)="submit()" >
<mat-form-field>
  <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>

</mat-form-field>
<mat-form-field>
  <mat-select placeholder="Favorite food" [formControl]="foodControl" required>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="foodControl.hasError('required')">Please choose an food</mat-error>

</mat-form-field>

<div mat-dialog-actions>
    <button mat-button (click)="onNoClick()">Cancel</button>

<button type="submit"  mat-button cdkFocusInitial [disabled]="!formCtrl.form.valid">submit</button>
</div>
</form>

demo

帮帮我

Answer 1

请尝试下面的代码，它正在工作，

<form [formGroup]="addTaskForm"  (ngSubmit)="submit()" >
<mat-form-field>
  <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>

</mat-form-field>
<mat-form-field>
  <mat-select placeholder="Favorite food" [formControl]="foodControl" required>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="foodControl.hasError('required')">Please choose an food</mat-error>

</mat-form-field>

<div mat-dialog-actions>
    <button mat-button (click)="onNoClick()">Cancel</button>

<button type="submit"  mat-button cdkFocusInitial [disabled]="foodControl.hasError('required') || animalControl.hasError('required')">submit</button>
</div>
</form>