Question

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

我的FormArray包含FormArray。每个control群组都有＆＃34;食物＆＃34; <select>，每个人都是array。

所有选择都由单 FormArray填充。

我想要实现的目标是：

每个选择的选项必须专门选择...换句话说， <form [formGroup]="formGroup"> <div> <button type="button" md-raised-button color="primary" (click)="addItem()"> <md-icon>add</md-icon> Add food </button> </div> <ng-container formArrayName="items" *ngFor="let item of formArray.controls; index as i"> <md-card> <md-card-title> <h3>Item nº {{ i + 1 }}</h3> <button type="button" md-mini-fab color="warn" mdTooltip="Remove" (click)="removeItem(i)"> <md-icon>delete</md-icon> </button> </md-card-title> <md-card-content [formGroupName]="i"> <md-select placeholder="Favorite food" formControlName="food" name="food"> <md-option *ngFor="let food of foods" [value]="food.value"> {{food.viewValue}} </md-option> </md-select> </md-card-content> </md-card> </ng-container> </form>中的结果必须仅包含唯一元素。

我的实际代码：

HTML：

formGroup: FormGroup;
formArray: formArray;

ngOnInit() {
  this.formArray = this.formBuilder.array([]);

  this.formGroup = this.formBuilder.group({
    items: this.formArray
  });
}

addItem() {
  this.formArray.push(
    this.formBuilder.group({
      food: ''
    })
  )
}

removeItem(index: number) {
  this.formArray.removeAt(index);
}

组件：

<select>

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

到目前为止，我认为有三种选择：

1 - 禁用已在另一个{{1}};

中选择的选项

2 - 创建自定义验证器并告诉用户他无法选择2个或更多选项中的选项。

3 - 从其他选项中完全删除选定的选项。

我更喜欢第一名。选项，但我找不到办法来做到这一点。有人能告诉我一些事情吗？我希望这个问题足够清楚。

这里是plunker。

Answer 1

这可以通过订阅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

Answer 2

建立我自己的解决方案：

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

isDisabled(value: number, index: number): boolean {
  const foundIndex = this.formArray.value.findIndex(val => val.food === value);

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

所以，在模板中......

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

PLUNKER

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

Angular中的互斥选项

2 个答案: