Angular 6 跟进：选项值中的 [attr.disabled] 禁用所有条目

Question

主题：Angular6、响应式表单、下拉菜单、禁用一个选项：即使检查员说 disabled=false.

也禁用了所有而不是仅一个预期值

早先人们非常友好地帮助我解决了我的问题：“Angular 6 Reactive Form - Select options: disable previously selected options” 但在我遇到障碍后它们似乎消失了，因此我的新问题是：

为什么禁用所有选项值而不是仅禁用应该与语句匹配的选项值？ [attr.disabled]="uplink2x === dropdown1Val"（即使我硬编码 nic0 dropdown1Val 个所有选项均已禁用）

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>

编辑： Stackblitz：https://stackblitz.com/edit/clarity-light-theme-v012-irvrup

似乎 disabled="true"（或 disabled="false" 就此而言）不适用于选项值。

Screenshot of behavior

Answer 1

如果您使用的是 Reactive Form，请不要使用 (change)="..."，订阅更改。此外，在 html 中使用 myForm.get('myControl').value 来引用控件的值

<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);
})

Answer 2

要禁用元素，只需使用属性 disabled 而不是 true 或 false。要再次启用它，您需要删除 disabled 属性。在您的代码中 [attr.disabled] 将值设置为 true 或 false，您只需要使用 [disabled] 而不是 [attr.disabled].

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

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

更新了你的 stackblitz here。

Answer 3

根据值设置禁用为

<option *ngFor="let type of types" [disabled]="!type" value="{{ type}}">{{ type}}</option>

Angular 6 跟进：选项值中的 [attr.disabled] 禁用所有条目

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

angular

angular-reactive-forms

angular6