Angular2 Javascript Push - Add item to array

Question

I'm building a form in Angular2 which contains a field that is an array of objects. I've so far built the table with a Delete Row button per row and an Add Row button. These use the JavaScript push() and slice() methods.

There is a big bug though: When adding a new row, the content of the previous rows is deleted. That is to say, the content of the row is deleted, not the row itself. Any ideas why?

Component Code:

public addRow(): void {
    this.table.push({});
}

public deleteRow(row: object): void {
    this.table.splice(this.table.indexOf(row), 1);
}

HTML Template

<form #TimesheetForm="ngForm" (ngSubmit)="saveTimesheet()">
    <div class="row">
        <div class="col text-right">
            <button type="button" class="btn" (click)="addRow()"><i class="fa fa-plus-square" aria-hidden="true"></i> Add Row</button>
        </div>
    </div>
    <table class="table">
        <thead>
            <td class="table__header">Date</td>
            <td class="table__header">Time</td>
            <td class="table__header">Actions</td>
        </thead>
        <tbody>
            <tr *ngFor="let row of table">
                <td class="table__item">
                    <input class="input" [(ngModel)]="row.date" name="date">
                </td>
                <td class="table__item">
                    <input class="input" [(ngModel)]="row.time" name="time">
                </td>
                <td class="table__item">
                    <button type="button" class="btn btn--negative" (click)="deleteRow(row)"><i class="fa fa-times" aria-hidden="true"></i> Delete</button>
                </td>
            </tr>
            <tr *ngIf="school.rows.length == 0">
                <td colspan="3">No rows exist yet. Click Add Row to start logging your timesheet.</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col">
        <button class="btn btn--positive" type="submit"><i aria-hidden="true" class="fa fa-check"></i> Save</button>
    </div>


    <div class="col text-right">
            <button class="btn btn--negative"><i aria-hidden="true" class="fa fa-times"></i> Cancel</button>
        </div>
    </div>
</form>

Are you using the FormArray type provided by angular to bring the array into your actual model? — joshrathke
– joshrathke, Commented Aug 6, 2017 at 17:39
Add your html code. Seems like deleteRow() is getting called when Add Row button is clicked. — Nehal
– Nehal, Commented Aug 6, 2017 at 18:21
Try to place the "Add Row" button before the form element. Just to make sure you are not submitting the form when clicking it. NB: your form tag is not properly closed, instead you have a dangling </div>. — trincot
– trincot, Commented Aug 6, 2017 at 19:46

AVJT82 · Accepted Answer · 2017-08-07 08:16:38Z

With template driven forms, we need to remember that the name attribute needs to be unique, otherwise the fields will be evaluated as the same field. So what your form does now, is not adding new form controls when you add new rows, instead it manipulates the one and same form field. If you were to put something like <pre>{{TimesheetForm.value | json}}</pre> in your template, you can see, that despite pushing new rows, there is only one form control name date and one form control named time.

So what we need to do is to provide an unique name, we can do that by using the index of the items in your table array. So do the following:

<tr *ngFor="let row of table; let i = index">
   <td>
      <input [(ngModel)]="row.date" name="date{{i}}">
   </td>
   <td>
      <input [(ngModel)]="row.time" name="time{{i}}">
   </td>
   <!-- more code here -->
</tr>

Collectives™ on Stack Overflow

Angular2 Javascript Push - Add item to array

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