Estoy trabajando en una aplicación Angular usando la forma reactiva. Obtengo el valor de los campos usando el grupo de formularios, pero esos campos se crean dinámicamente (el usuario controla la cantidad de filas de campos). así que para eso, he hecho el siguiente código:
this.formSaisieSecondary = this.fb.group({ options:this.fb.array([]) }); newOption(): FormGroup { return this.fb.group({ date:['', Validators.required], cargoA:['', Validators.required], cargoB:['', Validators.required], cargoC:['', Validators.required], cargoD:['', Validators.required], cargoE:['', Validators.required], unite:[this.unite, Validators.required], siloA:['silo1', Validators.required], siloB:['silo2', Validators.required], siloC:['silo3', Validators.required], siloD:['silo4', Validators.required], siloE:['silo5', Validators.required], comment:[''] }) } options() : FormArray { return this.formSaisie.get("options") as FormArray ; } AddOption(){ this.options().push(this.newOption()); }el código HTML:
<form [formGroup]="formSaisie"> <div formArrayName="options"> <div class="row mb-5" style="height: 23px;" *ngFor="let option of options().controls; let i = index" [formGroupName]="i"> <div class="col-md-1"> <input formControlName="date" type="text" formControlName="date" hidden [(ngModel)]="listDate[i]"> <p>{{listDate[i]}}</p> </div> <div class="col-md-2"> <mat-form-field class="inputGridItem" appearance="fill"> <mat-label>Cargaison</mat-label> <mat-select formControlName = "cargoA" required> <mat-option *ngFor="let cargo of dataEx" [value]="cargo.cargoId"> {{cargo.vessel +" "+ cargo.externalId}} </mat-option> </mat-select> </mat-form-field> </div> .............el código está inspirado en el siguiente método enter
mi pregunta aquí es cómo puedo obtener o establecer un valor para una propiedad (campo), por ejemplo, para obtener un valor que puedo hacer:
let value = this.formSaisie.value.options[0]; value.cargoA;pero no puedo establecer un valor para un campo.
Puede hacerlo, por ejemplo, con this.formSaisie.get('cargoA').setValue(someValueYouWouldLikeToSet)
editar: Así que hazlo como: this.formSaisie.get('options').get('cargoA').setValue(someValue) - debería funcionar
this.options().at(0).get('cargoA').setValue(someValue)Esto establece la propiedad cargoA del grupo en el índice 0 en la matriz de formularios a someValue
Nota al margen: recomendamos encarecidamente no usar ngModel y formularios reactivos en el mismo formulario. Entrarán en conflicto entre sí y, en ocasiones, serán impredecibles.