在角

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