Angular 6 Reactive Form - 选择选项:禁用之前选择的选项 [英] Angular 6 Reactive Form - Select options: disable previously selected options

问题描述

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

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

component.html

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

<div class="select" formGroupName="uplinksMgmt"><select formControlName="uplink3" id="uplink3Id" class="selectBox"><option *ngFor="让 nicAdapters 的上行链路 3x" [ngValue]="uplink3x" {{uplink3x}}</option></选择>

解决方案

设置 disabled 属性在必需选项上，如果在其他地方选择了这些选项

<select formControlName="uplink1" id="uplink1Id" class="selectBox"><option *ngFor="让 nicAdapters 的uplink1x" [ngValue]="uplink1x" [disabled]="uplink1x === form.controls.uplink2.value ||uplink1x==form.controls.uplink3.value" >{{uplink1x}}</option></选择>

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

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

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

<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>

解决方案

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>

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

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