Formulario angular basado en plantillas en las mejores prácticas de matrices

Necesito varios formularios en una tabla que se genera dinámicamente usando un formulario basado en plantilla. Funciona bien de la forma en que lo hice, pero no estoy seguro de que sea correcto.

<div *ngFor="let row of rows">
  <form #f="ngForm" (submit)="submit(f)">
    ...
  </form>
</div>

el #f se definirá muchas veces y me pregunto si eso podría causar un problema. Eventualmente podría darle un nombre dinámico (¿si es posible?), pero como funciona de esta manera no quiero complicarlo demasiado.

------------------------------------

No será un problema ya que cada etiqueta de formulario tendrá un contexto diferente. No es posible crear variables de referencia de plantilla dinámicamente.

Si no le gusta tener variables de referencia de plantilla, puedetener el índice del formulario actual y consultarlo usando ViewChildren.

template:

<div *ngFor="let row of rows; let i=index">
  <form (submit)="submit(i)">
    ...
  </form>
</div>

Component:

@ViewChildren('div > form') forms: Array<NgForm>;

submit(index: number){
 var currentForm:NgForm = forms[index];
}

------------------------------------

Puede crear un componente de formulario personalizado y agregarlo en la matriz de declaraciones del módulo, dentro del componente-formulario personalizado.html del componente, crear los controles del formulario de entrada y hacer que el formulario se envíe a un método en el formulario personalizado. -form-component.ts. Puede pasar el valor de las filas como un valor @Input() rowData al componente del formulario. Esto le permitirá tener un control detallado sobre el comportamiento del formulario. No olvide implementar la estrategia OnChange por motivos de rendimiento. Entonces la h de tu página principaltml podría verse así:

<div *ngFor="let row of rows">
  <custom-form [rowData]="row">
  </custom-form>
</div>

1

1

Sí, también estaba pensando en algo así, la forma era muy pequeña, así que no quería demasiadas complicaciones, pero puede que sea mejor.

- Red de sombras

28/03/2021 a las 12:44