I'm trying to autocomplete a form using the progress from previous responses the user gave. I get a JSON with the previous responses. In my component I build the form using '?' knowing the json with the results could be null
this.b2Data = this.surveyServices.getSurvey(); // Gets a JSON with results for this particular form
this.b2Data = this.formGroup.group({
ambExclusivos: new UntypedFormControl(this.b2Data?.ambExclusivos),
ambDormir: new UntypedFormControl(this.b2Data?.ambDormir, Validators.pattern(NUMERIC_PATTERN)),
ambTrabajo: new UntypedFormControl(this.b2Data?.ambTrabajo),
numAmbTrabajo:new UntypedFormControl(this.b2Data?.numAmbTrabajo, Validators.pattern(NUMERIC_PATTERN)),
ambComplementarioCocina: new UntypedFormControl(this.b2Data?.ambComplementarioCocina),
cocinaEnergia: new UntypedFormControl(this.b2Data?.cocinaEnergia),
})
In my HTML
<mat-card>
<mat-card-content>
<form [formGroup]="b2Data" (ngSubmit)="onSubmit()">
<mat-form-field class="full-width-input" appearance="fill">
<mat-label>1. ¿Cuántos ambientes/habitaciones tiene este hogar para su uso exclusivo? (excluyendo cocina, baño, pasillos, lavadero, garage)</mat-label>
<input matInput formControlName="ambExclusivos" placeholder="" value="{{b2Data.ambExclusivos}}">
<mat-error *ngIf="b2Data.controls.ambExclusivos?.errors">
Por favor ingrese caracteres numéricos (números positivos sin decimales).
</mat-error>
</mat-form-field>
<mat-form-field class="full-width-input" appearance="fill">
<mat-label>2. De esos, ¿cuántos usan habitualmente para dormir?</mat-label>
<input matInput formControlName="ambDormir"placeholder="" value="{{b2Data.ambExclusivos}}">
<mat-error *ngIf="b2Data.controls.ambDormir?.errors">
Por favor ingrese caracteres numéricos (números positivos sin decimales).
</mat-error>
</mat-form-field>
<p>3. ¿Utiliza alguno exclusivamente como lugar de trabajo? (para consultorio, estudio, taller, negocio, etc.)</p>
<section class="example-section">
<mat-radio-group formControlName="ambTrabajo" name="ambTrabajo" >
<mat-radio-button name="si" color="accent" matInput value = "true" ng-dirty
[checked] = "b2Data !== null && b2Data.ambTrabajo === true">Sí</mat-radio-button>
<mat-radio-button matInput value="false"
[checked] = "b2Data !== null && b2Data.ambTrabajo === false">No</mat-radio-button>
</mat-radio-group>
<mat-error *ngIf="b2Data.controls.ambTrabajo.errors">
El campo es requerido.
</mat-error>
</section>
<mat-form-field *ngIf="b2Data.value.ambTrabajo === 'true'" style="width: 15rem" appearance="fill">
<mat-label>3. a) ¿Cuántos?</mat-label>
<input type= "number" matInput formControlName="numAmbTrabajo" placeholder="" value = "{{b2Data.numAmbComplemTrabajo}}">
<mat-error *ngIf="b2Data.controls.numAmbTrabajo?.errors">
Por favor ingrese caracteres numéricos (números positivos sin decimales).
</mat-error>
</mat-form-field>
<p>4. ¿Tiene además...</p>
<section class="example-section">
<mat-radio-group formControlName="ambComplementarioCocina" name="ambComplementarioCocina" aria-label="">a) ...cuarto de cocina?
<mat-radio-button matInput value="true"
[checked] = "b2Data !== null && b2Data.ambComplementarioCocina === true">Sí</mat-radio-button>
<mat-radio-button matInput value="false"
[checked] = "b2Data !== null && b2Data.ambComplementarioCocina === false">No</mat-radio-button>
</mat-radio-group>
<mat-error *ngIf="b2form.controls.ambComplementarioCocina?.errors?.required">
El campo es requerido.
</mat-error>
</section>
<p>8. ¿Para cocinar, utiliza principalmente ...</p>
<section class="example-section">
<mat-radio-group formControlName="cocinaEnergia" name="energy" aria-label="Entrevista realizada">
<mat-radio-button [checked] = "b2Data !== null && b2Data.cocinaEnergia === 'Gas de red'" matInput value="Gas de red">... Gas de red?</mat-radio-button>
<mat-radio-button [checked] = "b2Data !== null && b2Data.cocinaEnergia === 'Gas de tubo/ garrafa'" matInput value="Gas de tubo/ garrafa" >... Gas de tubo/ garrafa?</mat-radio-button>
<mat-radio-button [checked] = "b2Data !== null && b2Data.cocinaEnergia === 'Kerosene/ leña/ carbón'" matInput value="Kerosene/ leña/ carbón" >... Kerosene/ leña/ carbón?</mat-radio-button>
<mat-radio-button [checked] = "b2Data !== null && b2Data.cocinaEnergia === 'Otro'" matInput value="Otro">... Otro</mat-radio-button>
</mat-radio-group>
</section>
<mat-form-field *ngIf="b2form.value.cocinaEnergia === 'Otro'"style="width: 90%" appearance="fill">
<mat-label>Especificar aquí</mat-label>
<input matInput formControlName="energyEsp" id="especify" [(ngModel)] = "b2Data !== null && b2Data.energyEsp">
</mat-form-field>
But I can´t get the mat radio buttons checked using the values inside the results JSON.
I have tried to bind [checked] using the condition where the results JSON (b2Data) is not null and where the value b2data.anyGivenField matchs the radio button value. Note that the first, second and last form fields (type number, type number and type enum) works.
Any thoughts, recomendations? Thanks a lot!