Angular 6反应形式-选择选项:禁用先前选择的选项 [英] Angular 6 Reactive Form - Select options: disable previously selected options

问题描述

我有3个下拉菜单，这些菜单必须具有唯一的值(我在此处分配网络适配器)，因此，如果在下拉菜单1中选择了一个网卡，则必须在下拉菜单2和3中将其禁用. 我找到了此答案和其他一些答案，但我无法使它们正常工作.

I have 3 dropdown menus that must have unique values (I am assigning network adapters here), so if one nic is selected in dropdown 1, it must be disabled in dropdowns 2 and 3. I have found this answer and a few other's, but I can't get them to work.

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'],
            })
        })
})

component.html

component.html

<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink1" id="uplink1Id" class="selectBox">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
    </select>
</div>
<div class="select" formGroupName="uplinksMgmt">
     <select formControlName="uplink2" id="uplink2Id" class="selectBox">
       <option *ngFor="let uplink2x of nicAdapters" [ngValue]="uplink2x">{{uplink2x}}</option>
    </select>
</div>
<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink3" id="uplink3Id" class="selectBox">
        <option *ngFor="let uplink3x of nicAdapters" [ngValue]="uplink3x" {{uplink3x}}</option>
    </select>
</div>

推荐答案

如果在其他位置选择了必需选项，请设置disabled属性

Set disabled attribute on required options if those are selected somewhere else

<div class="select" formGroupName="uplinksMgmt">
    <select formControlName="uplink1" id="uplink1Id" class="selectBox">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x" [disabled]="uplink1x === form.controls.uplink2.value || uplink1x==form.controls.uplink3.value " >{{uplink1x}}</option>
    </select>
</div>

显然form是FormGroup，并且您必须为此设置poper变量名称，因为您没有提供相关的组件代码.

obviously form is FormGroup and you have to set poper variable name for that as you didn't provide relevant component code.

这篇关于Angular 6反应形式-选择选项:禁用先前选择的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！