问题描述
限时送ChatGPT账号..我有 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屋!
更多推荐
[db:关键词]
发布评论