不允许在 Angular 中选择下拉列表中的另一个值

Question

我有一个简单的问题。有没有一种方法，如果我可以 select 下拉列表中的一个值，然后当我添加另一行时，那个 selected 下拉列表值不能再 selected 了？只有未 selected 的值才会出现在下拉列表中？下面是我的 stackblitz 的 link：

https://stackblitz.com/edit/form-array-patch-mtiiee?file=app/app.component.ts

<div class="col-sm-12">
    <select class="form-control" formControlName="ingredientData">
        <option value="null" hidden>-- Select Ingredient --</option>
        <option *ngFor="let ingredient of ingredients" [ngValue]="ingredient">
            {{ingredient.name}}
        </option>
    </select>
</div>

Answer 1

您可以检查当前选项是否已经 select 编辑在表单的 rows 表单数组的值中，并将 disabled 设置为相应的 select 选项。

<option *ngFor="let ingredient of ingredients" [ngValue]="ingredient" [disabled]="isSelected(ingredient)">

isSelected(ingredientData) {
  return this.addForm.get('rows').value.find(item => ingredientData === item.ingredientData);
}

参考example.

不允许在 Angular 中选择下拉列表中的另一个值

Don't Allow Another Value In Dropdown To Be Selected in Angular

angular

angular-reactive-forms

angular4-forms