Tengo un formulario que se ve así (tenga en cuenta que es solo un ejemplo):

<input type="checkbox">
<input type="text"><br>

<input type="checkbox">
<input type="text"><br>

<input type="checkbox">
<input type="text">

El ngModelGroup de todos los text campos es request. El ngModelGroup de todos los checkbox campos es important.

Para lograr mi objetivo, probablemente podría hacer algo como eso:

<div ngModelGroup="important">
  <input type="checkbox">
</div>  
<div ngModelGroup="request">
  <input type="text"><br>
</div>

<div ngModelGroup="important">
  <input type="checkbox">
</div>  
<div ngModelGroup="request">
  <input type="text"><br>
</div>

<div ngModelGroup="important">
  <input type="checkbox">
</div>  
<div ngModelGroup="request">
  <input type="text"><br>
</div>

Bueno, esa no es la mejor solución. ¿Hay alguna manera de hacer esto sin abrir y cerrar la etiqueta div varias veces?

Sería genial si pudiera crear ambas etiquetas div solo una vez y usar atributos para asignarlas. ¿Es eso posible?

-1
Reza Saadati 28 oct. 2019 a las 22:37

1 respuesta

La mejor respuesta

Actualización:

En general, puede utilizar este método. Puede agregar una variable en el archivo ts como una matriz de objetos y recorrerla.

tableData = [{
  rowClass: 'my-row-class1',
  colClass: 'my-col-class1',
  value: 'myValue1'
},
{
  rowClass: 'my-row-class2',
  colClass: 'my-col-class2',
  value: 'myValue2'
},
{
  rowClass: 'my-row-class3',
  colClass: 'my-col-class3',
  value: 'myValue3'
}];

Luego en la plantilla:

<ng-container *ngFor="let data of tableData">
    <row [ngClass]="data.rowClass">
      <col [ngClass]="data.colClass">
        {{data.value}}
      <col>
    </row>
  </ng-container>

Respuesta anterior

Puede utilizar NgFor para realizar un bucle. Si bien se necesita una matriz para realizar un bucle, puede usarla así:

<ng-container *ngFor="let i of [].constructor(3)">
  <div ngModelGroup="important">
    <input type="checkbox">
  </div>  
  <div ngModelGroup="request">
    <input type="text"><br>
  </div>
</ng-container>

Si necesita tener propiedades específicas para cada grupo, puede inicializar una matriz en el archivo ts y usarla en la plantilla en NgFor para recorrerlas.

Nota: La iteración del uso de NgFor sin una variable se tomó de aquí

1
yazantahhan 29 oct. 2019 a las 11:22