使用javascript点击重复表单

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

附加的图像是我的表单，onclick我想添加类似的表单，完成后将所有值提交到数据库。

您可以通过以下方式执行此操作（您还需要添加验证，但这是一个简单的工作演示https://stackblitz.com/edit/angular-p3cztw https://stackblitz.com/edit/angular-p3cztw):

网页代码

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

TS代码：

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

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

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

    }