Vtyjkyuk

I have the below code to create a row and a button Add Person. On click of Add person , i want to create one more row with Person 2, Person 3 and so on.
. How can I achieve it.

<div class="splitTheBill-row">
 <div class="splitTheBill-left">
 <div class="userIcon">
 <div class="splitTheBill-user">
 <img src="assets/images/person.png" alt="My Profile">
 </div>
 <div class="input-field national-id pull-left">
 <input id="form3" class="form-control" type="text">
 <label for="form3" class="">Person 1</label>
 </div>
 </div>
 </div>
 <div class="splitTheBill-right">
 <div class="input-field national-id pull-left">
 <input id="form4" class="form-control" type="text">
 </div>
 </div>
 </div>
 <div class="addperson-btncont">
 <div class="reg-submitCont">
 <button url="#" class="btn-secondary waves-effect waves-light btn">Add Person</button>
 </div>
 </div>

You need to use *ngFor to loop through your persons, like so:

 <div class="splitTheBill-left">
 <div *ngFor="let person of persons">
 <div class="userIcon">
 <div class="splitTheBill-user">
 <img src="assets/images/person.png" alt="My Profile">
 </div>
 <div class="input-field national-id pull-left">
 <input id="form3" class="form-control" type="text">
 <label for="form3" class="">person.name</label>
 </div>
 </div>
 </div>
 </div>

Then, you can create an array in the TS that represents the people:

 persons = [
 "name": "Person 1"
 ]

And to add a new row, all you need to do is push a new person into that array

 this.persons.push("name": "Person " + (this.persons.length + 1))

Take a look at the official tutorial for more info

I think what you're looking for here is a Reactive Form that could add person(s) on the fly to the form:

Here's a minimal Template:

<form [formGroup]="personsForm" (submit)="onFormSubmit()">
 <div formArrayName="persons">
 <div *ngFor="let person of persons; let i = index;" [formGroupName]="i">
 Name: <input type="text" formControlName="name"><br>
 Amount: <input type="text" formControlName="amount">
 </div>
 </div>
 <button type="button" (click)="addPerson()">
 Add Person
 </button>
 <button>
 Submit
 </button>
</form>

Here's the Component Class:

import Component from '@angular/core';
import FormGroup, FormControl, FormBuilder, FormArray from '@angular/forms';

@Component(...)
export class AppComponent 
 personsForm: FormGroup;

 constructor(private fb: FormBuilder) 

 ngOnInit() 
 this.personsForm = this.fb.group(
 persons: this.fb.array()
 );
 

 onFormSubmit() 
 alert(JSON.stringify(this.personsForm.value));
 

 addPerson() 
 (<FormArray>this.personsForm.get('persons')).push(this.fb.group(
 name: ,
 amount: 
 ));
 

 get persons() 
 return (<FormArray>this.personsForm.get('persons')).controls;
 

Here's a Sample StackBlitz for your ref.