samedi 4 mai 2019

How to use array of checkbox objects in Angular reactive forms

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="">
                <input name="i" type="checkbox" [formControl]="myOption" />
                <label>  </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?




Aucun commentaire:

Enregistrer un commentaire