In Angular 7 using reactive forms, I'm trying to build an array of checkboxes. I'd like to use an array of objects instead of just [true, true, false] as a result. My objects have a name, an id and a boolean selected property.
In my TypeScript:
myForm: FormGroup
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
myOptionsArray: this.fb.array([
{
id: 1,
name: 'Option 1',
selected: false
},
{
id: 2,
name: 'Option 2',
selected: true
},
{
id: 3,
name: 'Option 3',
selected: false
})
])
})
}
My template:
<form [formGroup]="myForm">
<div formArrayName="myOptionsArray">
<div *ngFor="let myOption of myOptionsArray.controls; let i = index">
<div formGroupName="{{ i }}">
<input name="i" type="checkbox" [formControl]="myOption" />
<label> {{ myOption.get('name').value }} </label>
</div>
</div>
</div>
</form>
I cannot get the selected property in the corresponding object to be updated. How do I manage to get each checkbox to update only the selected property in the array?
