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);
}
}