0

Hola a todos tengo una tabla en mi html en la cual al presionar un botón de agregar fila se agrega una nueva fila a mi tabla angular, todo esto con un *ngFor.

Lo que necesito realizar es que al crear una nueva fila mi ngModel sea dinámico para poder agregar luego los campos a la base de datos.

 <tr *ngFor="let t of valores, let i=index">
  <td><input type="text" class="form-control" name="tratamiento_{{i}}" placeholder="Tratamiento{{i}}" [(ngModel)]="tratamientosIngresoMedico.tratamiento"></td>
  <td><input type="text" class="form-control" name="desayuno_{{i}}" placeholder="Desayuno{{i}}" [(ngModel)]="tratamientosIngresoMedico.desayuno"></td>
  <td><input type="text" class="form-control" name="almuerzo_{{i}}" placeholder="Almuerzo{{i}}" [(ngModel)]="tratamientosIngresoMedico.almuerzo"></td>
  <td><input type="text" class="form-control" name="merienda_{{i}}" placeholder="Merienda{{i}}" [(ngModel)]="tratamientosIngresoMedico.merienda"></td>
  <td><input type="text" class="form-control" name="cena_{{i}}" placeholder="Cena{{i}}" [(ngModel)]="tratamientosIngresoMedico.cena"></td>
 </tr>

Boton el cual me agrega una nueva fila

<button type="button" (click)="addtable()" class="btn btn-add btn-sm btn-block mb-3"><i class="fas fa-plus"></i> Agregar nuevo tratamiento</button>

y el TS

  addtable() {
    this.numerotablas = this.numerotablas + 1;
    this.valores = Array(this.numerotablas).fill(0).map((x,i)=>i);
  }
1
  • ¿Por qué no usar un formulario reactivo? Crear uno dinámico es mucho más sencillo que con ngModel Commented el 3 ene. 2020 a las 14:09

1 respuesta 1

3

Una de las mejores formas que yo he podido hacer eso es con indices.

Aqui muestra un input de forma dinamica en el cual al dar Add lo que genera un push al arreglo:

import { Component } from "@angular/core";

@Component({
  selector: "app",
  template: `
  <form #formRef="ngForm">
    <div *ngFor="let word2 of words2; let in=index" class="col-sm-3">
        <div class="form-group">
          <input type="text" [(ngModel)]="words2[in].value" name="name{{in}}" class="form-control" #name="ngModel" required />
          <!--<p [hidden]="words2[in].value">Field is required</p>
          {{formRef.form.name1}}-->
        </div>
        <br />
    </div>
    <button [disabled]="!formRef.form.valid" (click)="add()">Add input</button>
  </form>
  <br />
  <br />
  {{words2 | json}}
  `
})
export class AppComponent {
  words2 = [{value: 'word1'}, {value: 'word2'}, {value: 'word3'}, {value: ''}];

  add() {
    this.words2.push({value: 'gsre'});
  }
}

Revisa este ejemplo a ver si te es util:

https://embed.plnkr.co/plunk/ukV3PZ
4
  • Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión
    – Riaven
    Commented el 3 ene. 2020 a las 20:19
  • 1
    Ok, es la primera vez que quiero aportar, ya modifique. Commented el 3 ene. 2020 a las 20:23
  • Excelente! :), esto ayuda que tu respuesta también sea bien recibida !
    – Riaven
    Commented el 3 ene. 2020 a las 20:25
  • Seguro gracias, espero que sirva. Commented el 3 ene. 2020 a las 20:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.