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

问题描述

主题:Angular 6、反应式表单、下拉菜单、禁用一个选项:尽管检查员说 disabled=false，但所有而不是仅一个预期值都被禁用.

人们之前非常友好地帮助我解决了我的问题:Angular 6 Reactive Form - 选择选项:禁用之前选择的选项"但是在我遇到障碍后它们似乎消失了，因此我的新问题是:

为什么禁用所有选项值，而不是仅禁用应该匹配语句的选项值? [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'],上行链路管理:this.fb.group({上行链路1:['nic0']，上行链路2:['nic1']，上行链路3:['nic3']，})})})公共已更改Val(val){this.dropdown1Val = val;}

component.html:

<select formControlName="uplink1" id="uplink1Id" class="selectBox" (change)="changedVal($event.target.value)"><option *ngFor="let upstream1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option></选择>
<div class="select" formGroupName="uplinksMgmt"><select formControlName="uplink2" id="uplink2Id" class="selectBox" (change)="changedVal($event.target.value)"><option *ngFor="让 nicAdapters 的上行链路 2x" [attr.disabled]="uplink2x === dropdown1Val" [ngValue]="uplink2x">{{uplink2x}}</option></选择>

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

似乎 disabled="true"(或 disabled="false" 就此而言)不适用于选项值.

行为截图

解决方案

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

 Test FALSE<选项禁用>测试为真</option><option *ngFor="let dropDownTestx of adapters"[ngValue]="dropDownTestx"[禁用]="dropDownTestx === 'vmnic2'">{{dropDownTestx}}</选项>

更新了您的 stackblitz 此处.

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

解决方案

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.

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