フォームの値がtrueに設定されているときに選択されたチェックボックスボタンを表示

Question

私は、ボタンとしてスタイル指定されたチェックボックスを持つフォームを持っています。

フォームに角度テンプレート駆動アプローチを使用し、*ngForループを使用してチェックできる平日の数を設定します（複数のチェックボックスが同時に不透明であれば同時にチェックすることができます）。

は私のコードは次のようになります。

<div class="btn-group btn-group-justified" data-toggle="buttons" role="group"> 
    <label class="btn btn-primary" *ngFor="let wday of wdays" [class.active]="f.value.wday"> 
    <input type="checkbox" [name]="wday" [id]="wday" ngModel [value]="wday">{{ wday }} 
    </label> 
</div> 

フォームは次のように開始されます。<form (ngSubmit)="onSubmit(f)" #f="ngForm">ので、f.wday戻りtrue（クリックした場合）、false場合（少なくとも一度クリックされた後、それは未確認だった）、または"" （起動後）コンソールに表示されます。

ボタンがアクティブであると視覚的に表示されないのは少し混乱しています。

Answer 1

あなたがタイプミスを持っている代わりに（？）：

[class.active]="f.value.wday" 

それはそれは実際にあなたのフォームコントロールをポイントするように

[class.active]="f.value[wday]" 

する必要があります。今のように、それはwdayという名前の既存のフォームコントロールを指しています。

DEMO：http://plnkr.co/edit/SSeqPHFyCQ1JUTLtGouv?p=preview

Answer 2

あなたはまた、すべての入力が、彼らはすべてが「wdaysのwdayを聞かせて」の最後の繰り返しの状態を持つことになり、同じIDを持っている場合は、[名前] =「wday」 で見たいと思うかもしれません

私はおそらく、Idがいずれかのすべての入力で同じになりたいいけない

let wday of wdays; let i = index 

[name]="'wday' + i" 

前にこれを実行しなければなりませんでした。

また、wdayはどのような形式でも真偽ですか、それともオブジェクトですか？ 私はそれをこのように推測し、追加の問題を説明します。

{ Name: "monday", value: "true" }