Angular 角度6反应形式-选择选项：禁用以前选择的选项

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

组件技术

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>

{{uplink1x}}
{{uplink2x}}
如果在其他地方选择了所需选项，则将其设置为禁用

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


{{uplink1x}}

显然，
form
是
FormGroup
，您必须为此设置poper变量名，因为您没有提供相关的组件代码。
尝试使用此自定义管道将有助于过滤数据。也请参考此链接以供参考

*.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;

}

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

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


{{uplink1x}}
{{uplink2x}}
{{uplink3x}}
在选择“下拉列表1”时使用（更改）=“changedVal（$event.target.value）”。将显示下拉列表中的选定值，现在在类变量中指定该值，如“dropdown1Val”，并在fomr 2和表格3的选项中使用[attr.disabled]=“uplink2x===dropdown1Val”

那应该管用

例如：

表格二或表格三

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


{{uplink2x}}


打字稿：

Html


尼泊尔
印度
巴基斯坦
中国
为每个
nicAdapter
添加标志，并根据需要进行设置或添加适当的条件。感谢Antoniosss，非常有用。我对Angular很陌生，所以整个分组对我来说有点混乱：-/我正在编辑我的问题以包括onInitgroup@PhilipK如果能解决问题的话，你可以考虑我的回答，如果它是有用的，甚至是被接受的。当然可以。您的“显然表单是FormGroup”语句让我有点困惑。您要么提供了来自
this.inputForm
的值的patho（因为您有复杂的表单，它将像
this.inputForm.value.upLinks.uplinkMgmt.uplink1
或类似的内容。您可以使用
console.log>调试数据结构（this.inputForm.value）
或在模板中，您可以
{{{inputForm.value | json}}
找出所需值的确切路径。啊！明白了。问题是，现在下拉列表中的每个选项都被禁用了，而不仅仅是与2或3个选项匹配的选项！它表示找不到管道“过滤器”-声明是否在正确的位置？您是否在module.ts文件中声明了管道？这与Antoniosss.Ex的工作原理几乎相同除了下拉菜单uplink2x中的所有值都被禁用，而不仅仅是Uplink1X中选择的值。请共享一个plunkr或stackblitz链接，以便我能够理解该方法的错误。此外，Antoniosss示例显示了基于form2或form3值禁用Form1选项的解决方案。我想，问题是禁用其他两个bas在表格1选择中被忽略。如果我错了，请纠正我。同时，我发现
disabled=“true”
（或
disabled=“false”
）似乎不适用于选项值。请参阅我的后续问题：
<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>

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

public formGroup: FormGroup;
constructor(public fb: FormBuilder) { 
    this.formGroup = this.fb.group({
      store: [{ value:"", disabled: true },[Validators.required, Validators.maxLength(4), Validators.pattern( /[0-9\.]/)]],
    });
 }

// Inside your function.
this.formGroup.controls['store']['enable']();

<select formControlName="store" class="form-control form-control-sm">
    <option value="np">Nepal</option>
    <option value="in">India</option>
    <option value="pk">Pakistan</option>
    <option value="ch">China</option>
</select>