Angular 2 RC5のチェックボックスグループの処理方法は？

Question

私は、ユーザーが受信したい雑誌購読を編集したいという形をしています。コードは以下の通りである：

コンポーネント：

export class OrderFormComponent { 

    subscriptions = [ 
     {id: 'weekly', display: 'Weekly newsletter'}, 
     {id: 'monthly', display: 'Monthly newsletter'}, 
     {id: 'quarterly', display: 'Quarterly newsletter'}, 
    ]; 

    mySubs = [ 
     this.subscriptions[1] 
    ] 

    order = new FormGroup({ 
     subs: new FormArray(this.mySubs.map(sub => new FormControl(sub)), Validations.required) //Lost at this part 
    }); 
} 

テンプレート：私はアプリを実行すると

<form [formGroup]="order"> 

<div formArrayName="subs"> 
    <label>Sign me up for newsletters</label> 
    <p *ngFor="let s of subscriptions; let i=index"> 
     <input type="checkbox" [value]="s.id" [formControlName]="i" /> {{ s.display }} 
    </p>   
</div> 

<div> 
    <input type="checkbox" formControlName="agree" /> I agree to the terms and conditions. 
</div> 

{{ order.value | json }} 

、3つのチェックボックスが表示されますが、一つだけがチェックされている（間違っています1つはそれ）。チェックされたものにはラベルが付いていますが、他のラベルにはラベルがありません。

私はここで間違って何をしているのですか？

Answer 1

だから私はそれを最終的に理解しました。私のコンポーネントで

私が持っている：私が持っているビューで

// The order retrieved from the server 
subscription = { 
    schedules: [{id: 'weekly', display: 'Weekly update'}], 
} 

//The FormGroup element 
this.subscriptionForm = new FormGroup({ 
     //Here I fill up a FormArray with some FormControls initialized to the 
     //currently selected schedules 
     schedules: new FormArray(this.subscription.schedules.map(schedule => new FormControl(schedule)), Validators.minLength(1)) 
    }); 

を：Aのような

changeSchedules(schedule: any) { 
    var currentScheduleControls: FormArray = this.subscriptionForm.get('schedules') as FormArray; 
    var index = currentScheduleControls.value.indexOf(schedule); 
    if(index > -1) currentScheduleControls.removeAt(index) //If the user currently uses this schedule, remove it. 
    else currentScheduleControls.push(new FormControl(schedule)); //Otherwise add this schedule. 
} 

作品：

<div> 
    <label>Frequency</label> 
    <p *ngFor="let schedule of viewData.schedules"> 
     <input type="checkbox" 
       [checked]="subscription.schedules.includes(schedule)" 
       (change)="changeSchedules(schedule)"> {{ schedule.display }} 
    </p> 
</div> 

そして、ここでは、クラスのchangeSchedules()方法であり、チャーム！フォームは、フォーム提出前にサブスクリプションアレイを取得/統合するために必要な余分なメソッドがなく、期待どおりに検証されます。

Answer 2

FormControlをインスタンス化する際に間違いをしました。すべてのオプションに対してFormControlの新しいインスタンスを作成するのではなく、1つだけ作成しました（mySubを反復して）。あなたのコードは、このような何か（テストしていない）であることを変更します。

order = new FormGroup({ 
    // creating an array of form control with default values 
    subs: new FormArray(this.subscriptions.map(sub => new FormControl(this.isSelectedSub(sub))), Validations.required) 
}); 


//... 
isSelectedSub(sub): boolean { 
    return this.mySubs.indexOf(sub) >= 0; 
} 

そして、あなたはおそらく、送信する前に選択した雑誌の購読の列にあるチェックボックスを統合する機能を必要としています。