ngform checkbox selection array submission

Question

I have used a step wizard utilising ngform. After the a user clicks "next" and that saves locally the users selection until the form submits on the final step.

I have introduced checkboxes to step 1 of the form. I can build up an array of the new chosen checkboxes and I also get an array for he rest of the form. I have tried combining the two but my form model does not like it.

Here is a stackblitz of my efforts so far - https://stackblitz.com/edit/angular-j7cu3x

main Issue - you will notice in the stackblitz above that after step 1 is complete and the checkboxes have been selected the selection array remains empty.

html - checkbox

<div *ngFor="let selection of intelSelections; let i=index">
  <label class="form-check-label">
    {{selection}}
  </label>
  <input class="form-check-input" [ngModel]="isSelected(selection)" (ngModelChange)="onChange(selection, $event)" type="checkbox" name="intelgroup_{{i}}">
</div>

component.ts - checkbox logic

isSelected(value: string): boolean {
    return this.selectedIntel.indexOf(value) >= 0;
}

onChange(value: string, checked: boolean) {
    console.log(value, checked);
    if (checked) {
        this.selectedIntel.push(value);
    } else {
        let index = this.selectedIntel.indexOf(value);
        this.selectedIntel.splice(index, 1);
    }
}

SAVE step 1

save(form: any): boolean {
    this.formDataService.setPersonal(this.personal);
    return true;
}

this.personal is the other array of input data on the form that gets submitted.

I can see two options:

combine this.selectedIntel to this.personal
[ngModel]="isSelected(selection)" figure out how to add personal.selection to ngModel.

I don't understand what the problem seems to be...why don't you just do this.personal.selection = this.selectedIntel; in your save method? — ViqMontana
– ViqMontana, Commented Oct 28, 2019 at 15:00

ViqMontana · Accepted Answer · 2019-10-28 15:20:54Z

1

Update your save method to:

save(form: any): boolean {
    this.personal.selection = this.selectedIntel;
    this.formDataService.setPersonal(this.personal);
    return true;
}

answered Oct 28, 2019 at 15:20

ViqMontana

5,7384 gold badges25 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ngform checkbox selection array submission

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related