I am currently implementing a fixed number of checkboxes that are being bound using a for loop.
<ul>
<li *ngFor="let chk of checkboxes">
<input type="checkbox" [id]="chk.id" [value]="chk.value"/>
<label [for]="chk.id">{{chk.name}}</label>
</li>
</ul>
My goal is to utilize template-driven forms to retrieve the values of all selected checkboxes in an array format, like this:
{
selected:[
checkboxValue1,
checkboxValue2,
checkboxValue3,
]
}
Just as a reminder:
While I have successfully used Reactive forms to create a FormGroup->FormArray that provides the following form value:
{
checkboxes:[
{
id: checkboxId1,
value: checkboxValue1,
selected: true,
},
{
id: checkboxId2,
value: checkboxValue2,
selected: false,
},
{
id: checkboxId3,
value: checkboxValue3,
selected: true,
}
]
}
I am then able to filter out based on 'selected' property being true.
I am interested in exploring how to achieve something similar with template-driven forms.