Angular 中的互斥选项

Question

让我试着解释一下我的情况......

我有一个包含FormArray 的<form>。每个FormArray 组都有“食物”control，每个组都是<select>。

所有选择都由单个array填充。

我想要实现的是：

每个选择的选项必须是唯一选择的......换句话说， FormArray 中的结果必须仅包含 unique 元素。

---

我的实际代码：

HTML：

<form [formGroup]="formGroup">
  <div>
    <button mat-raised-button color="primary" type="button" (click)="addItem()">
      <mat-icon>add</mat-icon>Add food
    </button>
  </div>
  <ng-container
    formArrayName="items"
    *ngFor="let item of formArray.controls; index as i"
  >
    <mat-card>
      <mat-card-title>
        <h3>Item nº {{ i + 1 }}</h3>
        <button
          mat-mini-fab
          color="warn"
          matTooltip="Remove"
          type="button"
          (click)="removeItem(i)"
        >
          <mat-icon>delete</mat-icon>
        </button>
      </mat-card-title>

      <mat-card-content [formGroupName]="i">
        <mat-select
          formControlName="food"
          name="food"
          placeholder="Favorite food"
        >
          <mat-option
            [value]="food.value"
            *ngFor="let food of foods"
          >
            {{ food.viewValue }}
          </mat-option>
        </mat-select>
      </mat-card-content>
    </mat-card>
  </ng-container>
</form>

组件：

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample {
  readonly foods: readonly Food[] = [
    { value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }
  ];
  readonly formArray = this.formBuilder.array([]);
  readonly formGroup = this.formBuilder.group({
    items: this.formArray
  });
  
  constructor(private readonly formBuilder: FormBuilder) {}
  
  addItem(): void {
    this.formArray.push(
      this.formBuilder.group({
        food: ''
      })
    )
  }
  
  removeItem(index: number): void {
    this.formArray.removeAt(index);
  }
}

---

我想知道实现这一目标的最佳选择。

到目前为止，我认为有 3 个选项：

1 - 禁用已在另一个<select> 中选择的选项；

2 - 创建一个自定义验证器并告诉用户他不能在 2 个或更多选择中选择一个选项。

3 - 从其他选择中完全删除 selected 选项。

我更喜欢第一个。选项，但是我找不到这样做的方法。有人可以告诉我一些开始吗？我希望这个问题足够清楚。

这是demo。

Answer 1

只需构建我自己的解决方案：

我创建了一个方法来检查它是否应该被禁用：

isOptionDisabled(value: string, index: number): boolean {
  const foodsFormArray = this.formArray.value as readonly FoodFormGroup[];
  const foundIndex = foodsFormArray.findIndex(({ food }) => food === value);

  return foundIndex !== -1 && foundIndex !== index;
}

所以，在模板中...

...
<mat-option
  [disabled]="isOptionDisabled(food.value, i)"
  [value]="food.value"
  *ngFor="let food of foods"
...

DEMO

这不是最佳解决方案吗？也许...如果您有其他选择，请告诉我。

Answer 2

这可以通过订阅控件的valueChanges来实现，

this.formGroup.controls['items'].valueChanges.subscribe(
   d=>{
       _.remove(this.foods,(item)=>{return item=== d[0].food})
 })

在订阅中，从数组中移除元素。

删除时，再次将对象推入数组，如下所示，

removeItem(index: number) {
      this.foods.push(this.formArray.controls[index].controls["food"].value);
      this.formArray.removeAt(index);
}

UPDATED PLUNKER FOR LIVE DEMO