Angular 6重用形式具有不同的[[ngModel）]作为输入

Question

I would like to know what is the best way to do something like this, I have this form:

 <div class="telefono">
      <label>Telefonos</label>
      <div class="tel" *ngFor="let t of tfonos">
        <div class="row">
          <div class="col-md-2">
            <label for="tfijo">Telefono fijo</label>
            <input type="text" class="form-control" [(ngModel)]="telefono.telFijo" name="tfijo">
          </div>
          <div class="col-md-2">
            <label for="tcel">Telefono Celular</label>
            <input type="text" class="form-control" [(ngModel)]="telefono.telCelular" name="tcel">
          </div>

          <div class="col-md-3">
            <label for="email">E-mail</label>
            <input type="email" class="form-control" [(ngModel)]="telefono.email" name="email">
          </div>         
          </div>
        </div>
      </div>


      <button type="button" (click)="agregar()" class="btn btn-primary">Add</button>

The button agregar adds an element to tfonos so the div gets duplicated, the issue is that the [(ngModel)] also gets duplicated and binds them together, the ideal scenario for me would be to give each duplicate a different ngModel instance or something along those lines.

Answer 1

You should put telefono instances inside your tfonos array.

<div class="telefono">
  <label>Telefonos</label>
  <div class="tel" *ngFor="let t of tfonos; let i = index">
    <div class="row">
      <div class="col-md-2">
        <label for="tfijo">Telefono fijo</label>
        <input type="text" class="form-control" [(ngModel)]="t.telFijo" 
[name]="'tfijo' + i">
     </div>
      <div class="col-md-2">
        <label for="tcel">Telefono Celular</label>
        <input type="text" class="form-control" [(ngModel)]="t.telCelular" 
[name]="'tcel' + i">
      </div>

      <div class="col-md-3">
        <label for="email">E-mail</label>
        <input type="email" class="form-control" [(ngModel)]="t.email" 
[name]="'email' + i">
      </div>         
    </div>
  </div>
</div>