1

tengo un tema con que no encuentro en ningún lugar con documentación o explicaciones completas sobre formArray anidados con angular en todas sus versiones.

El tema en cuestion es el siguiente:

Donde lo tengo que implementar es en un stepper con un formGroup que lo engloba como dice la documentación oficial (en cada uno de los pasos es un formArray) y en uno de los pasos tengo que agregar formularios según el usuario requiera (aquí el otro formArray).

El html del componente es el siguiente

    i<form [formGroup]="formGroup">  
    <mat-horizontal-stepper formArrayName="formArray" >    
      <mat-step formGroupName="0" [stepControl]="formArray.get([0])">
      .. .. .. ..
      </mat-step>
      <mat-step formGroupName="1" [stepControl]="formArray.get([1])">
       .. .. .. ..
      </mat-step>
      <mat-step formGroupName="2" [stepControl]="formArray.get([2])">
        <ng-template  matStepLabel > Reporte de datos </ng-template>

        <mat-form-field class="example-full-width m-1-left">
          <input type="text"
                 placeholder="Seleccione un reporte de datos"
                 aria-label="Seleccione un reporte de datos"
                 matInput
                 [formControl]="autoCompleteControl"
                 [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option.nombre">
              {{option.nombre}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>



        <button mat-button class="boton button m-1-left" 
        aria-label="Example icon-button with menu icon" (click)="agregarReporte()">
            
          <i class="fas fa-tasks"></i>
          Agregar y verificar datos
          
        </button>
        

        <div formArrayName="reporteDatos" *ngFor="let reporteDato of formArray.get([2]).reporteDatos.controls; let i = index">
          <mat-card [formGroupName]="i" style="display: flex; flex-wrap: wrap;">
          
              <input type="hidden" class="acotado-10" 
              [attr.id]="'reporteDato' + i" 
              formControlName="_id" 
              value="_id" >
              <input type="text" class="acotado-10" 
              [attr.id]="'reporteDato' + i" 
              formControlName="nombreRepo" 
              value="nombreRepo" >
            

          </mat-card>
        </div>

        
        <div class="botonesStep">
          <button class="boton button" mat-button matStepperPrevious type="button"><i class="fas fa-arrow-left"></i> Volver</button>
          <button class="boton button" mat-button matStepperNext type="button">Siguiente <i class="fas fa-arrow-right"></i></button>
        </div>
      </mat-step>
      <mat-step >
        <ng-template  matStepLabel > Generar reportes de resultados </ng-template>
        <div class="botonesStep">
          <button class="boton button" mat-button matStepperPrevious type="button"><i class="fas fa-arrow-left"></i> Volver</button>
          <button class="boton button" mat-button matStepperNext type="button"><i class="fas fa-poll"></i>Generar reportes de resultados </button>
        </div>
      </mat-step>
    </mat-horizontal-stepper>
  </form>

El ts del componente es el siguiente

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators} from  '@angular/forms' ;
import { Observable } from 'rxjs';
import { Sensor } from 'src/app/_models/sensor';
import { SensoresService } from 'src/app/_services/sensores.service';
import {map, startWith} from 'rxjs/operators';


@Component({
  selector: 'app-reportes-generar',
  templateUrl: './reportes-generar.component.html',
  styleUrls: ['../reportes.css']
})
export class ReportesGenerarComponent implements OnInit {

  isLinear:boolean= false;
  panelOpenState:boolean = false;
  public sensores;
  filteredOptions: Observable<Sensor[]>;
  /* ****** */
  /* autocomplete */
  autoCompleteControl = new FormControl();

  formGroup: FormGroup;
  constructor(private _formBuilder: FormBuilder,
    private SensoresService:SensoresService) { }

  ngOnInit() {
/* ******************************** */
    this.formGroup = this._formBuilder.group({
      formArray: this._formBuilder.array([
        this._formBuilder.group({
          nombreProtocolo: ['',Validators.required],
          alcance:  ['',Validators.required],
          descSistema:  ['',Validators.required],
          medidasFurgon:  ['',Validators.required],
          verifCalibracion:  ['',Validators.required],
        }),
        this._formBuilder.group({}),
        this._formBuilder.group({
          reporteDatos: this._formBuilder.array([
            
          ])
        })
      ])
    });
/* ******************************** */
/* autocomplete */
  this.sensores = this.SensoresService.getSensores();
  this.filteredOptions = this.autoCompleteControl.valueChanges
  .pipe(
    startWith(''),
    map(value => typeof value === 'string' ? value : value.nombre),
    map(nombre => nombre ? this._filter(nombre) : this.sensores.slice())
  );

  }

  private _filter(nombre: string): Sensor[] {
    const filterValue = nombre.toLowerCase();

    return this.sensores.filter(option => option.nombre.toLowerCase().indexOf(filterValue) === 0);
  }
  displayFn(sensor: Sensor): string {
    return sensor && sensor.nombre ? sensor.nombre : '';
  }


  get formArray(){
    var aux=this.formGroup.get('formArray') as FormArray;
    return aux;
  }

  agregarReporte(){
    const reportesDatosFormGroup = this._formBuilder.group({
      _id:['1'],
      nombreRepo:['asd'],
      tipoPrueba:[''],
      estado:[''],
    })
    this.formArray.get([2]).get('reporteDatos');//.push(reportesDatosFormGroup);
    console.log(this.formArray.get([2]));
    console.log(reportesDatosFormGroup);
  }

}

1 respuesta 1

1

Puedes usar la siguiente estructura para realizar lo deseado.

<!-- 
    =====================================
     Array array 
    =====================================
    -->
    <ng-container formArrayName="array">
      <ng-container *ngFor="let dummy of array_FB.controls; let i = index">
        <ng-container [formGroupName]="i">

             ...tu codigo...        
        </ng-container>
      </ng-container>
    </ng-container>
    <!-- 
    =====================================
     END Array array 
    =====================================
    -->

Si hay mas campos que requieran array solo usas dentro la misma estructura. Obviando que hay que remplazar los datos con los correspondientes, dentro metes tu estructura sin necesidad de hacer mas complejo la estructura.

Utilizar ng-container te permitirá tener una estructura de html mas limpia. Y separar un poco la lógica de renderizado de la plantilla de la lógica de estructuración de reactiveForms

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.