Duplicate Form On Click Using Javascript

addDetails() { const divCreate = document.createElement('div'); divCreate.appendChild(document.createTextNode('Some text')); divCreate.setAttribute('class', 'bg-s

Solution 1:

You can do it in the following way (you will need to add validation too but here is a plain working demo https://stackblitz.com/edit/angular-p3cztw):

Html code

<div *ngFor="let item of formDataList;let i = index;"><form  ><inputtype="text" [(ngModel)]="item.detail"name="detail" /><inputtype="text" [(ngModel)]="item.amount"name="amount" /><inputtype="date" [(ngModel)]="item.date"name="date" /><button (click)="removeItem(item)"> remove </button></form></div><form #addForm="ngForm" ><inputtype="text" [(ngModel)]="data.detail"name="detail" /><inputtype="text" [(ngModel)]="data.amount"name="amount" /><inputtype="date" [(ngModel)]="data.date"name="date" /><br/><button (click)="addItem(data)"> add  </button></form>

Ts code :

publicdata = { };
   public formDataList = [];

   addItem($item){
       this.formDataList.push($item)
       this.data = {};
    }

   removeItem($item){
       this.formDataList.splice( this.formDataList.indexOf($item),1)

    }