javascript - 使用javascript点击重复表单

Question

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

附上的图片是我的表单，onclick 我想添加类似的表单，完成后会将所有值提交给 db。

标签： javascriptangulartypescript

Answer 1

您可以通过以下方式执行此操作（您也需要添加验证，但这是一个简单的工作演示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>

TS代码：

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

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

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

    }