I am facing an issue with a form that has multiple fields created using formGroup and formControlName. The challenge arises when I launch the application and need to retrieve data from the back end to display it on the view.
The specific problem I'm encountering is that the field "Funcion" is not displaying the value:
https://i.sstatic.net/b5GeR.png
Below is a snippet of my HTML code:
<form #f="ngForm" [formGroup]="registros" class="fila-contenido">
<div class="campos">
<!-- En Venta THIS IS OK-->
<label>¿En venta?</label>
<mat-radio-group formControlName="enVenta" aria-labelledby="example-radio-group-label"
class="example-radio-group">
<mat-radio-button value="1" class="example-radio-button">Si</mat-radio-button>
<mat-radio-button value="0" class="example-radio-button">No</mat-radio-button>
</mat-radio-group>
</div>
<!-- Activo THIS IS OK-->
<div class="campos">
<label>¿Registrado?</label>
<mat-radio-group formControlName="activo" aria-labelledby="example-radio-group-label"
class="example-radio-group">
<mat-radio-button value="Si" class="example-radio-button">Si</mat-radio-button>
<mat-radio-button value="En Trámite" class="example-radio-button">En Trámite</mat-radio-button>
<mat-radio-button value="No Necesita" class="example-radio-button">No Necesita
</mat-radio-button>
<mat-radio-button value="No" class="example-radio-button">No</mat-radio-button>
</mat-radio-group>
</div>
<!-- Pais THIS IS OK-->
<mat-form-field appearance="">
<mat-label>Pais</mat-label>
<mat-select formControlName="pais">
<mat-option *ngFor="let pais of selectedPaises" [value]="pais">{{pais}}</mat-option>
</mat-select>
</mat-form-field>
<!-- Funcion THIS IS NOT OK-->
<mat-form-field appearance="">
<mat-label style=" font-weight: bold;">Función</mat-label>
<mat-select formControlName="funcion" required (selectionChange)=changeFuncion($event)>
<mat-option *ngFor="let funcion of funciones" [value]="funcion">{{funcion.Funcion}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
Additionally, here is the TypeScript code:
ngOnInit(): void {
this.getRegistros();
}
getRegistros() {
this.http.get<Registro>('http://localhost:7000/api/registros/' + this.service.getRow()).subscribe(data => {
data.log = data.log.replace(/\\"/g, '"');
console.log("formateo", JSON.parse(data.log));
let convert = JSON.parse(data.log);
this.registros.controls.enVenta.setValue(convert.enVenta); //this is OK
this.registros.controls.activo.setValue(convert.activo); //this is OK
this.registros.controls.pais.setValue(convert.pais); //this is OK
this.registros.controls.funcion.setValue(convert.funcion); //this is not OK
});
}
Having tried various approaches, such as logging all the form values (which includes the missing value) and testing with ngOnInit and ngAfterViewInit cycles, I am still unable to resolve the issue. I also attempted to use patchValue() instead of setValue() without success.
If you have any suggestions or advice, I would greatly appreciate it.
Thank you.