如何获取在Angular2中动态创建的文本框的值

Question

I have a requirement to design the multiple text boxes based on user clicks shown in below image

design of my html page

But whenever i click on + button value in text box is repeating my html is code like below

<div class="form-group" style="margin-top: -10px;">
    <div class="col-lg-10" *ngFor="let rowplus of rowplus" style="margin-top: 12px;">
        <input type="text"  placeholder="Command" class="form-control" [(ngModel)]="cli.cmd[rowplus[0]]"  name="cmd" />
    </div>
    <div class="col-lg-2" style="margin-top: 12px;">
        <button class="btn btn-success" (click)="addrow()"><i class="fa fa-plus"></i></button>
        <button class="btn btn-danger" (click)="subrow()"><i class="fa fa-minus"></i></button>
    </div>
</div>

How to avoid this and how to use dynamic value for [(ngmodel)] .

Answer 1

Don't use the same variable for all text boxes

[(ngModel)]="cli.cmd"

You can either use index

<div class="col-lg-10" *ngFor="let rowplus of rowplus; let idx=index" style="margin-top: 12px;">
  <input  type="text" id="command" placeholder="Command" class="form-control"  [(ngModel)]="cli[idx].cmd" name="cmd" />
</div>

or store the value in the *ngFor interator variable rowplus

<div class="col-lg-10" *ngFor="let rowplus of rowplus" style="margin-top: 12px;">
  <input  type="text" id="command" placeholder="Command" class="form-control"  [(ngModel)]="rowplus.cmd" name="cmd" />
</div>