在角

Question

相互排斥的选项让我试着解释一下我的情况......

我有一个<form>包含一个FormArray。每个FormArray组拥有“食品”control，并且它们每个都是<select>。

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

我想要实现的是：

每个选择的选项必须选择专门...换句话说， 结果在FormArray只能包含独特元素。

---

我的实际代码：

HTML：

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

组件：

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); 
} 

---

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

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

1 - 这已在另一<select>选择禁用选项;

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

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

我更喜欢1st。选项，但是我找不到办法做到这一点。有人能告诉我一些启动吗？我希望这个问题很清楚。

这是plunker。

Answer 1

刚刚建立我自己的解决方案：

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

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

是不是最佳的解决方案？也许......如果你有另一个选择来做到这一点，让我知道。

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