时间戳

首页 > 解决方案 > Angular 6 Reactive Form - 选择选项：禁用先前选择的选项

angular - Angular 6 Reactive Form - 选择选项：禁用先前选择的选项

问题描述

我有 3 个必须具有唯一值的下拉菜单（我在这里分配网络适配器），因此如果在下拉 1 中选择了一个 nic，则必须在下拉 2 和 3 中禁用它。我找到了这个答案和其他一些答案，但是我不能让他们工作。

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

组件.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>

标签： angularangular6angular-reactive-forms

解决方案

disabled如果在其他地方选择了所需选项，请设置属性

<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 变量名称，因为您没有提供相关的组件代码。

推荐阅读