ボタンangle2をクリックして入力フィールドを複製する方法

Question

ボタンの入力フィールドを複製する問題に直面しています *入力フィールドが少なく、そのデータを入力することができます *入力フィールドi追加するデータセットが異なるので、同じフィールドが必要です。 *ボタン（addMore）を押すと、フィールドが複製され、もう1つのデータセットを追加できるようになります。 *必要でない場合、それらの複製されたフィールドをremonessessiveveに役立つ1つのボタン（削除）が必要です。

私は私のサンプルコードと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

を共有していた角度..andでこれを試してみました

export class App { 

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

プランカリンク： - http://plnkr.co/edit/GCCnoMkLynpELwaYX11m?p=preview

Answer 1

あなたはより多くの要素をプッシュすることができaddmoreボタンをクリックすると、それらの

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

、次のようにあなたが最初に初期値を持つ配列を作成することができますngFor

を使用して動的な入力を生成するために探しています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