CODEWITHSUNDEEP
javascriptarraysangular
ajgisme
ajgisme

Reputation: 1765

Angular2 Javascript Push - Add item to array

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>

Upvotes: 2

Views: 1678

Answers (1)

AVJT82
AVJT82

Reputation: 73357

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>

Upvotes: 1

Related Questions