Angular 6 Follow up: [attr.disabled] in option value disables all entries

Question

Topic: Angular 6, Reactive Form, DropDown Menu, Disable One Option: all instead of just the one intended value are disabled, even though the inspector says disabled=false.

People were very kind to help me with my problem earlier: "Angular 6 Reactive Form - Select options: disable previously selected options" but they seemed to disappear after I hit a roadblock, hence my new question:

Why are ALL option values disabled instead of just the one that is supposed to match the statement? [attr.disabled]="uplink2x === dropdown1Val" (even if I hardcode nic0 instead of dropdown1Val all options are disabled)

component.ts:

nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10']


   this.inputForm = this.fb.group({
    upLinks: this.fb.group ({
     NumberUplinks: ['2'],
        uplinksMgmt: this.fb.group ({
            uplink1: ['nic0'],
           uplink2: ['nic1'],
           uplink3: ['nic3'],
        })
    })
  })

public changedVal(val) { 
  this.dropdown1Val = val;
}

component.html:

<div class="select" formGroupName="uplinksMgmt">
   <select formControlName="uplink1" id="uplink1Id" class="selectBox" (change)="changedVal($event.target.value)">
      <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
   </select> 
</div>
<div class="select" formGroupName="uplinksMgmt">
   <select formControlName="uplink2" id="uplink2Id" class="selectBox" (change)="changedVal($event.target.value)">
      <option *ngFor="let uplink2x of nicAdapters" [attr.disabled]="uplink2x === dropdown1Val" [ngValue]="uplink2x">{{uplink2x}}</option>
   </select> 
</div>

Edit: Stackblitz:https://stackblitz.com/edit/clarity-light-theme-v012-irvrup

Seems like disabled="true" (or disabled="false" for that matter) doesn't work with option values.

Screenshot of behavior

Solution

To disable elements just use attribute disabled rather than true or false. To enable it again, you need to remove the disabled attribute. In your code [attr.disabled] is setting the value to true or false, what you need is just use [disabled] instead of [attr.disabled].

  <option>Test FALSE</option>
  <option disabled>Test TRUE</option>

  <option *ngFor="let dropDownTestx of adapters" 
      [ngValue]="dropDownTestx" 
      [disabled]="dropDownTestx === 'vmnic2'">
      {{dropDownTestx}}
  </option>

Updated your stackblitz here.

Comments

[alphapilgrim]

sounds like a perfect time to create a stackblitz or codepen.

[PhilipK]

your wish is my command: stackblitz.com/edit/clarity-light-theme-v012-irvrup

[PhilipK]

Thanks, but that's not it. I tried it and every option is disabled. Maybe I'm missing something here, but with inputForm.get('uplik2').value you are comparing the value that's set, instead of the one cycling through the *ngFor, no? I only need the value that's selected in uplink1 to be deactivated in uplink2.