Angular 5: Get checkbox values in a JSON object with the check box name as key and true/false as value?

Question

I have a form with checkbox names say Apple and Mango. When I check one/both/none I would like the value to store in a JSON on submitting the form.

How to do the same in Angular 5?

Haifeng Zhang · Accepted Answer · 2018-03-16 20:14:58Z

1

Here's how you can achieve it by Reactive Form:

xxx.component.html

<div [formGroup]="form" (ngSubmit)="onSubmit()">
     <div>
         <input type="checkbox" formControlName="apple">
         <input type="checkbox" formControlName="mango">
     </div>
     <button type="submit">Submit</button>
</div>

xxx.component.ts

form = this.fb.group({
    apple: true,  // initial value
    mango: false
  }
);

onSubmit() {
  console.log(this.form.value); // this is JSON
}

If you want to store string Apple or Mango you can validate the boolean results returned from this.form.value

answered Mar 16, 2018 at 20:14

Haifeng Zhang

32.1k21 gold badges95 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

Angular 5: Get checkbox values in a JSON object with the check box name as key and true/false as value?

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