CODEWITHSUNDEEP
angularangular-forms
its me
its me

Reputation: 542

How to Disable button when dropdown is empty in Angular?

I want to check whether the dropdown is empty. If not empty, enable the submit button. If empty, disable the submit button. Below is my 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

help me out

Upvotes: 1

Views: 2167

Answers (1)

Hitesh Kansagara
Hitesh Kansagara

Reputation: 3526

Please, Try below code it is working, 

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

Upvotes: 2

Related Questions