如何在单击按钮angular2时复制输入字段答案

【问题标题】：How to replicate input fields on click of button angular2如何在单击按钮angular2时复制输入字段
【发布时间】：2017-10-09 19:24:07
【问题描述】：

我遇到了在单击按钮时复制输入字段的问题 *我的输入字段很少，我可以在其中填写数据 *填写输入字段后，我要添加不同的数据集，因此我需要相同的字段。 *如果我按下按钮（addMore），字段应该复制，它应该允许我再添加一组数据。 *如果没有必要，应该有一个按钮（删除）可以帮助我remonessessaryve那些复制的字段。

我已经在 Angular 中尝试过这个。我正在分享我的示例代码，请 plunker 帮助我

template.ts

<div class="card">
  <input type="text" id="name" value="" class="form-control">
  <label for="form1">Name</label>
  <input type="text" id="mobile" value="" class="form-control">
  <label for="form1">Mobile</label>
</div>

<button type="button" title="Add"class="btn btn-sm" 
(click)="addMore">Add</button>

test.component.ts

export class App {

  addMore() {
    //function to replicate the form input fields
  }

plunker 链接：- http://plnkr.co/edit/GCCnoMkLynpELwaYX11m?p=preview

【问题讨论】：

标签： javascript jquery angular typescript

【解决方案1】：

您正在寻找使用 ngFor

生成动态输入

你最初可以创建一个初始值如下的数组，

 inputelements = [{name: '',mobile:''}];

点击 addmore 按钮后，您可以推送更多元素，这些元素将使用 ngFor

呈现

模板代码将，

  <div class="card" *ngFor="let word of inputelements; let in=index" class="col-sm-3">
      <div class="form-group">
       <label for="form1">Name</label>
        <input type="text" [(ngModel)]="inputelements[in].name"  class="form-control"  required>
          <label for="form1">Mobile</label>
            <input type="text" [(ngModel)]="inputelements[in].mobile"  class="form-control"  required>

      </div>
  </div>
 <br>
<button type="button" title="Add"class="btn btn-sm pull-right" 
(click)="addMore()">Add</button>

WORKING DEMO

【讨论】：

完美 ..@Sajeetharan .thanks bro ..如果我需要删除添加的字段，我可以通过数组索引来完成吗？？
@DeepakVijay 是的，您可以通过传递索引来删除并使用拼接

【解决方案2】：

使用数组跟踪输入并使用 js 添加/删除：

  inputs = [];

  add() {
    this.inputs.splice(0,0,this.inputs.length+1);
  }

DEMO

【讨论】：