Angular 6 Reactive Form - Select options:禁用以前选择的选项

Question

我有3个下拉菜单，它们必须有唯一的值(我在这里分配网络适配器)，因此如果在下拉列表1中选择了一个nic，则必须在下拉列表2和3中禁用它。我找到了this answer和其他几个，但我无法让它们工作。

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>

Answer 1

如果在其他位置选择了所需选项，则在这些选项上设置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变量名称，因为您没有提供相关的组件代码。

Answer 2

尝试此自定义管道将有助于过滤数据。另请参阅此链接以获取参考sample

*.component.ts

import { Component,Pipe,PipeTransform } from '@angular/core';


@Pipe({name: 'filter'})
export class FilterPipe implements PipeTransform {
transform(value: any,key: string): any {    
  if (!value || !key) {return value;}  
  return value.filter( value =>(value.search(key) !== 0));
}
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {  
  nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10'];
  selectedValue:any;

}

*.component.html

<div class="select">
    <select id="uplink1Id" class="selectBox" (change)="selectedValue=$event.target.value">
        <option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
    </select>
</div>
<div class="select">
     <select id="uplink2Id" class="selectBox" >
       <option *ngFor="let uplink2x of nicAdapters | filter:selectedValue" [ngValue]="uplink2x">{{uplink2x}}</option>
    </select>
</div>
<div class="select">
    <select id="uplink3Id" class="selectBox" >
        <option *ngFor="let uplink3x of nicAdapters | filter:selectedValue" [ngValue]="uplink3x"> {{uplink3x}}</option>
    </select>
</div>

Answer 3

在"dropdown1“的选择中使用(change)="changedVal($event.target.value)”。下拉列表中的选定值将会显示出来，现在将该值分配到一个类变量"dropdown1Val“中，并在表格2和表格3的选项中使用attr.disabled="uplink2x === dropdown1Val”。

这应该行得通！

例如：

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

Component.ts

public changedVal(val) { 
  this.dropdown1Val = val;
}

表格2或表格3

<div class="select" formGroupName="uplinksMgmt">
 <select formControlName="uplink2" id="uplink2Id" class="selectBox">
   <option *ngFor="let uplink2x of nicAdapters" [attr.disabled] = "uplink2x === dropdown1Val" [ngValue]="uplink2x">{{uplink2x}}</option>
</select>

​