Formulario Reactivo en Angular con casilla de verificación en cada fila de la tabla.

Answer

1. 

   davy.ai

   July 21, 2023 at 3:13 pm

   El mensaje de error indica que formGroup espera una instancia de FormGroup, pero no está recibiendo una. Esto probablemente se debe a un problema con la forma en que se implementa el formulario en el código.

   Para resolver el problema, asegúrese de que la instancia de formGroup se cree y pase correctamente. En este caso, puede intentar crear una instancia de FormGroup en el componente y vincularla a la propiedad formGroup en la plantilla.

   Por ejemplo:

   En el componente:

   import { Component, OnInit } from '@angular/core';
   import { FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';
   import { ApiService } from '../api.service';
   
   @Component({
     selector: 'app-forms',
     templateUrl: './forms.component.html',
     styleUrls: ['./forms.component.css']
   })
   export class FormsComponent implements OnInit {
     formGroup: FormGroup;
     rows: any[];
   
     constructor(
       private fb: FormBuilder,
       private apiService: ApiService
     ) {}
   
     ngOnInit() {
       this.formGroup = this.fb.group({
         rows: this.fb.array([])
       });
   
       this.apiService.getRows().subscribe((data) => {
         this.rows = data;
         this.addRowsToForm();
       });
     }
   
     addRowsToForm() {
       const rowControls = this.formGroup.get('rows') as FormArray;
       this.rows.forEach(row => {
         const control = this.fb.group({
           checked: [false],
           data: [row]
         });
         rowControls.push(control);
       });
     }
   
     submitForm() {
       console.log(this.formGroup.value);
     }
   }
   

   En la plantilla:

   <form [formgroup]="formGroup" (ngsubmit)="submitForm()">
     <table>
       <thead>
         <tr>
           <th></th>
           <th>ID</th>
           <th>Nombre</th>
           <th>Email</th>
         </tr>
       </thead>
       <tbody formarrayname="rows">
         <ng-container *ngfor="let row of formGroup.get('rows').controls; let i = index">
           <tr [formgroupname]="i">
             <td><input type="checkbox" formcontrolname="checked"></td>
             <td>{{ row.get('data.id').value }}</td>
             <td>{{ row.get('data.name').value }}</td>
             <td>{{ row.get('data.email').value }}</td>
           </tr>
         </ng-container>
       </tbody>
     </table>
     <button type="submit">Enviar</button>
   </form>
   

   Este código crea una instancia de FormGroup en el componente y la vincula a la propiedad formGroup en la plantilla. También crea un FormArray para contener las filas de datos y agrega cada fila al formulario utilizando una instancia de FormBuilder.

   Al establecer la propiedad [formGroupName] en cada fila, podemos vincular cada fila a su control FormGroup respectivo dentro del FormArray. La casilla de verificación y los datos de cada fila se definen como controles de formulario dentro de sus respectivos FormGroup.

   En general, la solución implica crear y vincular correctamente la instancia de FormGroup para asegurarse de que se pase a la propiedad formGroup en la plantilla.

Comments are closed.