How to Disable button when dropdown is empty in Angular?

Question

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

There are multiple console errors in your demo that will probably lead you to a solution, if you correct them. — Claies
– Claies, Commented Mar 27, 2018 at 17:56
you definitely should be, if your code matches the demo you posted. if you aren't, then you probably should consider fixing the demo before asking for further help. — Claies
– Claies, Commented Mar 28, 2018 at 7:41

Hitesh Kansagara · Accepted Answer · 2018-04-21 04:50:38Z

2

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>

edited Apr 21, 2018 at 4:50

answered Mar 27, 2018 at 18:08

Hitesh Kansagara

3,6063 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hitesh Kansagara Over a year ago

where you bind selected value in dropdown

its me Over a year ago

my expecttation before submit form all dropdown should be filled

its me Over a year ago

no its not working only its checking foodControl i want to check both i updated here demo stackblitz.com/edit/angular-olzhfg-jhdvdn?file=app/…

Hitesh Kansagara Over a year ago

i have changed my answer now try it

its me Over a year ago

need one more help if i submit how can i get selected dropdown values in console(submit() { console.log(this.addTaskForm.value); }) . stackblitz.com/edit/angular-olzhfg-awghxy?file=app/…

Collectives™ on Stack Overflow

How to Disable button when dropdown is empty in Angular?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related