Angular2 - 反応型と複数のチェックボックスが正しく動作しない

Question

反応型をまだ学習しており、配列（例：趣味）の複数のチェックボックスを使用したいと考えています。次のようにhobbies = ['Cooking', 'Swimming', 'Hiking', 'Dancing'];

は今、HTMLで、私は、チェックボックスを定義した：

<div> 
    <span *ngFor="let hobby of hobbies"> 
    <label> 
     <input type="checkbox" [value]="hobby" (click)="addToHobby(hobby)"> {{hobby}} 
    </label> 
    <br /> 
    </span> 
</div> 

今、それはdoesnの要素をチェックするとき

this.myForm = this.fb.group({ 

    name: ['', Validators.required], 

    hobbies: this.fb.array([]) 

}); 

趣味が配列され、以下のようにだから私は、グループを定義しましたそれを趣味のプロパティにまったく追加しないで、実際のHTML要素を複製するだけです。私は間違って何をしていますか？

は、ここでは、コードです：私は働いて何かを得るために管理https://plnkr.co/edit/j8V189VoWKvloNgwOr7p?p=preview

Answer 1

OK。リンクは以下にありますが、第一に、ここに私の考えがあります。

まず、我々は、おそらく我々は、Webサービスからこれを取得するには、ちょうどすべての値の配列を定義する必要がありますが、それでも、私はこのようにそれらをあざけり：

hobbies = [new Hobby(1, 'Cooking'), new Hobby(2, 'Swimming'), new Hobby(3, 'Hiking'), new Hobby(4, 'Dancing')]; 私は意図的にもIDを追加しましたので、実世界をより正確に模倣するでしょう。さて、フォームを定義する必要があります。複数のチェックボックスが機能しないので、私は個々のチェックボックスの配列を表現することに決めましたが、それぞれがいくつかの属性を持っていましたが、少なくとも2つは必要です：配列のチェックボックスが選択されたかどうかを判断するブール値と、私たちが選んでいるもの

これを達成するために、我々はまず、以下のように行われているフォーム、収まるように配列を作成する必要があります：私はそれぞれの趣味のためにfb.group新しいを作成し、彼らがしている、

let hobbiesArray = []; 

    for (let hobby of this.hobbies) { 
     hobbiesArray.push(this.fb.group({ 
     isChosen: false, 
     name: hobby.hobbyName, 
     id: hobby.id 
     })); 
    } 

明らかなようにすべて配列に配置されます。以下のように、この配列は、その後、フォームを作成するために使用されます。

this.myForm = this.fb.group({ 
     hobbiesList: this.fb.array(hobbiesArray) 
    }); 

は、今、私たちはfb.groupsのfb.arrayを持っています。今、HTMLについて言えば、私はいくつかの懸念があります。 。。 は、ロジックがmyForm.hobbiesListを通過し、name読み取り専用を維持しながらisChosenを操る」である - ソートのここでのコードだ

<div formArrayName="hobbiesList"> 
    <div *ngFor="let hobby of hobbiesList.controls; let i=index" [formGroupName]="i" > 
    <input type="checkbox" formControlName="isChosen" /> {{hobby.controls.name.value}} 
    </div> 
</div> 

ここに私の関心事です：どのような害ができ{{hobby.controls.name.value}}：私はちょうどこのような名前を解決できますか？ ？これを行う私はどのAngular2/4ルールを破っアム

OK、そのように選択された趣味を確認すると、以下のように、我々は（isChosen値なし）の名前とIDと実際の配列を取得：？

submitMe(): void { 
    let items = this.myForm.value; 
    this.mySelectedHobbies = items.hobbiesList.filter(x => x.isChosen).map(x => { return { name: x.name, id: x.id }; }); 
} 

だから、これは私のデザインです。私はそれがすべて許可されているかどうかはわかりませんが、私はこれを問題を解決する最も簡単な方法と考えています。皆さんはどう思いますか？ここで

コードです：ユーザーがチェックボックスを選択したときにhttps://plnkr.co/edit/8OKiQMK788R2uCt2OWzm?p=preview