CODEWITHSUNDEEP
angularangular2-forms
Protagonist
Protagonist

Reputation: 1669

Angular2:Checkbox with *ngFor in a table

I have an HTML table with a checkbox associated to each row. By default all the rows would checked initially.

    <form #f="ngForm" novalidate>
          <table>
            <tr>
              <th></th>
              <th>Id</th>
              <th>Name</th>
              <th>Initial</th>
            </tr>
            <tr *ngFor="let name of names">
              <td><input type="checkbox" [checked]="chk" [(ngModel)]="name"></td>
              <td>{{name.id}}</td>
              <td>{{name.name}}</td>
              <td>{{name.Initial}}</td>
            </tr>
          </table>
            <button type="submit" (click)="save(f.value, f.valid)>Submit</button>
   </form>

I want to display checked rows of the table but I'm getting error. I'm new to Angular2. Any help on this?

Plunker Link

Upvotes: 2

Views: 9235

Answers (3)

Garth Mason
Garth Mason

Reputation: 8001

The way you have the form, you won't see the 'whole row' (by whole row I presume you mean the ID, Name and Initial) in the form's value property as only the checked boolean value is part of the Angular form - meaning it is the only one using ngModel.

To determine what is checked, (see below from your plunkr) you could bind the checked state back to each name entry, and on submit you inspect the names collection to see which are checked, and then 'show' that data (again not sure what you mean by 'checked rows to be shown').

 <div>
      <form #f="ngForm" (ngSubmit)="save(f.valid, names)" novalidate>
      <table>
        <tr>
          <th></th>
          <th>Id</th>
          <th>Name</th>
          <th>Initial</th>
        </tr>
        <tr *ngFor="let name of names">
          <td><input type="checkbox" [(ngModel)]="name.checked" [name]="name.id"></td>
          <td>{{name.id}}</td>
          <td>{{name.name}}</td>
          <td>{{name.Initial}}</td>
        </tr>
      </table>
        <button type="submit">Submit</button>
    </form>
        <hr>
    </div>
    <div>
          <div>Form details:-</div>
          <pre *ngIf="f.submitted">submitted value: <br>{{names | json}}</pre>
    </div>

Note: you can also bind to the form's ngSubmit output event to call save etc when the form is submitted.

If you want to inspect the form's value rather than two-way binding back to the names data, then you need to include the fields for Id, Name and Initial in the form using ngModel.

Upvotes: 4

AVJT82
AVJT82

Reputation: 73337

In forms, form names need to be unique to differentiate between the fields. So here we could use e.g each unique name for each object in your array. 

name="{{name.name}}"

As per radio buttons and checkboxes still (?) being a bit buggy in forms, I've been struggling myself with these issues and have (finally) figured out a solution.

Since in forms, the form name attribute overrides pretty much everything, this means that now [checked]="chk" doesn't work anymore.

The way I have figured out to fix this, is by using template variable as [(ngModel)] and the "traditional" checked property, so the final solution looks like this:

<input type="checkbox" #i checked name="{{name.name}}" [(ngModel)]="i.checked">

Here's your Forked Plunker! :)

Upvotes: 0

R. Richards
R. Richards

Reputation: 25141

You need to make one change in order for this form to display.

This:

<td><input type="checkbox" [checked]="chk" [(ngModel)]="name"></td>

Needs to be something like this:

<td><input type="checkbox" [checked]="chk" [id]="id" [name]="id"></td>

This will make the form display, it will not make the form submit work. Looks like you still need to code the click event stuff.

Upvotes: 0

Related Questions