Question

我正面临着在按钮上复制输入字段的问题 *我有几个输入字段，我可以填写数据 *填写输入字段后，我有一个不同的数据集要添加，所以我需要相同的字段。 *如果我按下按钮（addMore），字段应该复制，它应该允许我添加一组数据。 *如果没有必要，应该有一个按钮（删除）可以帮助我查看那些复制的字段。

我在角度尝试了这个..我正在分享我的示例代码和plunker plz帮助我

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

Answer 1

您正在寻找使用 ngFor 生成动态输入

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

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

点击“添加”按钮，您可以推送更多元素，这些元素将使用 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

Answer 2

使用数组保持输入的跟踪，并使用js：

添加/删除

  inputs = [];

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

DEMO

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

2 个答案: