Angular 6 reuse form with different [(ngModel)] for inputs

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.

What exactly is your question? You seem to have answered it yourself, you need a different ngModel mapping. Something like `telefono[some_index_goes_here].telFijo`. If you need the index from the `ngFor` loop, refer to [this answer](https://stackoverflow.com/a/35405648/965834) (the updated part). — Jeto, Oct 18 '18 at 20:13

alex351 · Accepted Answer · 2018-10-18T20:22:14.557

0

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>

edited Oct 18 '18 at 20:22

answered Oct 18 '18 at 20:16

alex351

1,826
1
21
32

The thing is i'm using tfonos as a different array exclusively to add the duplications of the form,it's not actually an array ot the class "telefono", i'm setting the ngmodel to an instance of a class and then pushing that class to an array of telefonos. – Flavio Alarcon Oct 18 '18 at 20:20
When you push the instance to the array of telefonos, you should also push the email, telCelular and telFijo properties. Hope it helps. Else, I would need to see more code. – alex351 Oct 18 '18 at 20:30
In the end with your suggestions I made it work, thank you very much. – Flavio Alarcon Oct 19 '18 at 14:14

Angular 6 reuse form with different [(ngModel)] for inputs

1 Answers1