单击使用JavaScript的重复表格 [英] Duplicate Form on click using javascript

问题描述

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

附件中的图像是我的表单，onclick我想添加类似的表单，完成后会将所有值提交给db.

The image attached is my form, and onclick I want to add similar form, and once done will submit all values to db.

推荐答案

您可以按以下方式进行操作(您也需要添加验证，但这是一个简单的演示

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代码

<div *ngFor="let item of formDataList;let i = index;">
<form  >
  <input type="text" [(ngModel)]="item.detail" name="detail" />
  <input type="text" [(ngModel)]="item.amount" name="amount" />
  <input type="date" [(ngModel)]="item.date" name="date" />
  <button (click)="removeItem(item)"> remove </button>
</form>
</div>

<form #addForm="ngForm" >
  <input type="text" [(ngModel)]="data.detail" name="detail" />
  <input type="text" [(ngModel)]="data.amount" name="amount" />
  <input type="date" [(ngModel)]="data.date" name="date" />
  <br/>
  <button (click)="addItem(data)"> add  </button>
</form>

电话代码:

   public data = { };
   public formDataList = [];

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

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

    }

这篇关于单击使用JavaScript的重复表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！