2

My Code:

<mat-select 
[formControl]="Rooms" [(ngModel)]="dropdown"placeholder="ChooseRooms"multiple>
<mat-option *ngFor="let room of RoomList" [value]="room">
   {{room}}
</mat option>
</mat-select>

<mat-select 
[formControl]="devices" [disabled] = "!dropdown"placeholder="ChooseDevices"multiple>
<mat-option [value]="device" disabled>
   {{device}}
</mat-option>
</mat-select>

Problem:

In the above code, I have two dropdowns "Rooms" and "Devices" in which options are in the form of checkboxes.

From above code, I am able to enable second dropdown "devices" whenever I checked any checkbox in the first dropdown but, I am unable to disable the second dropdown "devices" whenever I unchecked any checkbox.

Bruno Martins
  • 882
  • 2
  • 10
  • 21
Chethan Gs
  • 37
  • 8
  • Why are you mixing both reactive and template driven form. It's not recommended to use both. https://stackoverflow.com/questions/55739509/mixing-reactive-form-with-template-form – Chellappan வ Jan 16 '20 at 13:16
  • you should not be checking to see if the first dropdown exists. You should add a selectionChange event to the first dropdown, then check to see if all boxes are unchecked. Inside the same function, you should define a variable that will be false if any of the boxes is checked. Use this same variable to determine if the second dropdown should be disabled. – Wen W Jan 16 '20 at 14:46

1 Answers1

0

Here you need to change condition for disabled property like - [disabled]="!dropdown.length"

<mat-select [(ngModel)]="dropdown" placeholder="ChooseRooms" multiple>
   <mat-option *ngFor="let room of Rooms" [value]="room">
   {{room}}
   </mat-option>
</mat-select>

<mat-select  [disabled]="!dropdown.length" placeholder="ChooseDevices" multiple>
   <mat-option [value]="devices">
   {{devices}}
   </mat-option>
</mat-select>
Nikhilesh Agrawal
  • 223
  • 1
  • 6