如何在點擊按鈕時複製輸入字段angular2

我面臨的問題是複製輸入字段onclick按鈕 *我有很少的輸入字段，我可以填充該數據 *填充輸入字段後i有一個不同的數據集添加，所以我需要相同的字段。 *如果我按下按鈕（addMore）字段應該複製，它應該允許我添加一組數據。 *應該有一個按鈕（刪除），這將幫助我重新審覈這些複製的領域，如果沒有必要。如何在點擊按鈕時複製輸入字段angular2

我在角試過這種..和我分享我的示例代碼和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

來源

2017-10-09 Deepak Vijay

您正在尋找使用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

來源

2017-10-09 19:32:41 Sajeetharan

完美.. @ Sajeetharan .thanks BRO ..如果我需要刪除添加的字段，我可以通過數組索引對嗎？ –

@DeepakVijay是的，你可以刪除通過索引和使用拼接 – Sajeetharan

-http：//plnkr.co/edit/iWPF92uBHm7Hy0sEnbRY？p =預覽..謝謝你，我現在做... –

保持的輸入的軌道以與陣列和添加/將JS除去：

inputs = []; 

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

DEMO

來源

2017-10-09 19:35:15 Vega

如何在點擊按鈕時複製輸入字段angular2

回答

相關問題