Angular 2 Reactive Form with checkboxes

Question

Recently I've been trying to figure out how those Reactive Forms works. Basic examples (no nesting etc.) are understandable however if I have a form structure like this with checkboxes:

  {
  "username": "",
  "damnIt": "",
  "checkboxes": [
    {
      "checked": false,
      "name": "Checked1",
      "value": 10
    },
    {
      "checked": false,
      "name": "Checked1",
      "value": 11
    },
    {
      "checked": false,
      "name": "Checked1",
      "value": 12
    }
  ]
}

How should I render it on the template in order to change the "*checked" value (true | false)?

AngularChef · Accepted Answer · 2017-02-26 16:31:04Z

1

You could do something like this:

  <form #theForm="ngForm" (ngSubmit)="submitForm(theForm.value)">

      <div *ngFor="let cb of data.checkboxes">
        <label>
          <input type="checkbox" [name]="cb.name" [(ngModel)]="cb.checked">{{cb.value}}
        </label>
      </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

  <pre>{{data.checkboxes|json}}</pre>

See Plunkr: https://plnkr.co/edit/MpSO21fIJq1DtJoXmE3V?p=preview

edited Feb 26, 2017 at 16:31

answered Feb 26, 2017 at 16:29

AngularChef

14.1k9 gold badges55 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 Reactive Form with checkboxes

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