angular2 Dynamic add row

Question

I have requirement where i can add dynamic row or remove row, here is my code

ngOnInit{

this.rows.push({
   id:'',
   name:'',
  age:''
})

addRow(){
let a= {
   id:'',
   name:'',
  age:''
}
this.rows.push(a)
}

deleteRow(index){
this.rows.splice(index,1)
}

}

the issue is suppose i have three rows i have entred value in all three rows ,if i delete second rows and added third row, second and third row fields become blank

<div *ngFor="item in rows;let i =index;">
     <div>
<input type="text" name="name{i}" [(ngModel)]="item.name"> delete/add button here
    </div>
</div>.

Why did write your methods in ngOnInit? I hope it's a misprint — Dmitry Grinko
– Dmitry Grinko, Commented Nov 19, 2017 at 13:51
where is your add/ delete html code ? Put so we can see what's wrong. — Melchia
– Melchia, Commented Nov 19, 2017 at 15:46

Ravi Shah · Accepted Answer · 2017-11-19 14:54:49Z

2

// TS File Code

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // Initializtion
  public row: any = [{}];


  // Load on Component Initialization
  public ngOnInit() {

  }


  // Add New Row
  addRow() {
    this.row.push({});
  }

  // Delete Rows
  deleteRow(index: number) {
    this.row.splice(index, 1);
  }

  // Get All Row Values
  getRowValue() {
    console.log(this.row);
  }
}


// HTML File 

<h1>
  Creating Dynamic Textboxes (rows)
</h1>
<input type="button" value="Add Rows" (click)="addRow()"/>
<div *ngFor="let item of row; let i=index">
  <input type="text" name="name{{i}}" [(ngModel)]="item.name"> 
  <input type="button" value="Delete Rows" (click)="deleteRow(index)"/>
</div>

<input type="button" value="Get Rows Value" (click)="getRowValue()"/>

I hope these code would help you in solving your issue and hope these answer would be satisfactory

Thank You

answered Nov 19, 2017 at 14:54

Ravi Shah

364 bronze badges

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

1 Comment

Ravi Shah Over a year ago

embed.plnkr.co/ybJBN6phN4fre9VUUi0J This is the plunkr link for the same. Hope it would help you

Dmitry Grinko · Accepted Answer · 2017-11-19 16:53:59Z

0

Your issue - first index of ngFor is zero. Anyway you shouldn't use index from ngFor in your case. Use id of your item.

delete(id){
   const index = this.rows.map(e => e.id).indexOf(id);
   if(index !== -1) {
       this.rows.splice(index, 1);
   }
}

your html:

<div *ngFor="let item of rows">
    <span>{{item.name}}</span>
    <span>{{item.age}}</span>
    <button (click)="delete(item.id)"></button>
<div>

Hope it helps

edited Nov 19, 2017 at 16:53

answered Nov 19, 2017 at 13:44

Dmitry Grinko

15.4k15 gold badges66 silver badges91 bronze badges

1 Comment

user7789076 Over a year ago

Hi Dmitry ,it didn't solve my problem deleteRow(index,id) { const index1 = this.rows.findIndex(x => x._id==id); if(index1 !== -1) { this.rows.splice(index1, 1); } };

Collectives™ on Stack Overflow

angular2 Dynamic add row

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related