Angular 6跟进:选项值中的[attr.disabled]禁用所有条目 [英] Angular 6 Follow up: [attr.disabled] in option value disables all entries

问题描述

主题:Angular 6，反应形式，下拉菜单，禁用一个选项: 即使检查员说disabled = false，也将禁用所有功能而不只是一个预期值.

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:

为什么禁用所有选项值，而不是仅禁用应该与该语句匹配的值? [attr.disabled]="uplink2x === dropdown1Val"(即使我对nic0而不是dropdown1Val进行硬编码，所有选项也都被禁用)

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:

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:

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

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

类似于disabled="true"(或disabled="false")似乎不适用于选项值.

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

行为截图

推荐答案

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

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>

更新了您的stackblitz

Updated your stackblitz here.

这篇关于Angular 6跟进:选项值中的[attr.disabled]禁用所有条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！