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

Answer 1

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.

Answer 2

If your're using Reactive Form, not use (change)="...", subscribe to change. Moreover, in html use myForm.get('myControl').value to refer to the value to a control

<div class="select" formGroupName="uplinksMgmt">
   <select formControlName="uplink2" id="uplink2Id" class="selectBox" 
      <!--remove the (change)
      (change)="changedVal($event.target.value)"
      -->
      >
      <option *ngFor="let uplink2x of nicAdapters" 
           [attr.disabled]="inputForm.get('uplik2').value=== dropdown1Val" 
           [ngValue]="uplink2x">{{uplink2x}}
      </option>
   </select> 
</div>

//in your .ts after create the form
this.inputForm.get('uplink2').valueChanges.subscribe(value=>{
   ..you logic here..
   console.log(value);
})