Не допускайте выбора другого значения в раскрывающемся списке в угловых

Question

У меня простая проблема.Есть ли способ, что если бы я мог выбрать значение из раскрывающегося списка, а затем, когда я добавляю другую строку, это выбранное значение раскрывающегося списка больше не может быть выбрано?Только значения, которые не выбраны, будут доступны в раскрывающемся списке?Вот ссылка на мой стек-блиц ниже:

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

Вы можете проверить, выбран ли уже текущий параметр в значении массива формы rows и установить disabled для соответствующего параметра выбора.

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

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

См. пример .