javascript - 如何在单击按钮 angular2 时复制输入字段

Question

我遇到了单击按钮时复制输入字段的问题*我有几个输入字段，我可以在其中填写数据*填写输入字段后，我有一个不同的数据集要添加，所以我需要相同的字段。*如果我按下按钮(addMore)，字段应该复制，并且它应该允许我添加一组数据。*如果不需要的话，应该有一个按钮(删除)来帮助我删除那些复制的字段。

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

模板.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
  }

骗子链接:- http://plnkr.co/edit/GCCnoMkLynpELwaYX11m?p=preview

Answer 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