Dropdown is still disable even after selecting a value

Question

There are two dropdown buttons d1 and d2. d2 is disabled. After selecting a value from 'd1', 'd2' is still disabled.

<div class="card-container">
        <label>Country</label>
        <select placeholder="Country" [(ngModel)]="selectedCountry" (change)="changeCountry($event)" >
            <option>--Choose Country--</option>
            <option *ngFor="let country of Countries" >{{country.name}}</option>
        </select>
    </div>

    <div class="card-container">
        <label>State</label>
        <select placeholder="State" (change)="changeState($event)"
      [disabled]="selectedCountry">
            <option>--Choose State--</option>
            <option *ngFor="let state of states">{{state.name}}</option>
        </select>
    </div>

On using [disabled]="selectedCountry" d2 is disabled but not disable if [disabled]="!selectedCountry" I want to make d2 selectable only if d1 is selected.

Answer 1

[disabled]="selectedCountry" means if you have some value for selectedCountry it will be true, which means its disabled. So the condition should be the reverse

[disabled]="!selectedCountry"

will make it disabled if the selectedCountry doesnt have any value.

<div class="card-container">
  <label>Country</label>
  <select placeholder="Country" [(ngModel)]="selectedCountry" (change)="changeCountry($event)" >
    <option>--Choose Country--</option>
    <option *ngFor="let country of Countries" >{{country.name}}</option>
  </select>
</div>

<div class="card-container">
  <label>State</label>
  <select placeholder="State" (change)="changeState($event)" [disabled]="!selectedCountry">
    <option>--Choose State--</option>
    <option *ngFor="let state of states">{{state.name}}</option>
  </select>
</div>

also make sure the inital value of selectedCountry to be selectedCountry = ''