NG-SELECT does not value in a angular child component

Problem with ng-select not displaying pre-filled values after patchValue I am working on an Angular project where I have a ng-select component inside a form that is dynamically loaded with a list of workers (TrabalhadorLookupDTO). My goal is to pre-fill the selected value of ng-select using the patchValue method once the form data is fetched from the server.

The problem is that although the value (i.e., trabalhadorId) is correctly fetched and logged in the console, the ng-select does not display the pre-filled value when editing a record.

Parent Component

`ngOnInit(): void {
// Load workers and doctors asynchronously
this.lookupService.getLookupMedico().subscribe((lookup) => {
this.medico = lookup;
});

// Load workers before applying patchValue
this.lookupService.getLookupTrabalhador(1, this.incluiDemitido).subscribe((trabalhadores) => {
this.trabalhador = trabalhadores;

// Apply patchValue after workers are loaded
setTimeout(() => {
this.activatedRoute.paramMap.pipe(
switchMap((params) => {
this.id = params.get('id');
return this.id ? this.getExameToxicologico(this.id) : this.getExameToxicologico(0);
})
).subscribe((exame) => {
if (exame) {
this.exameToxicologico = exame;
this.form.patchValue({
exameToxicologicoId: exame.exameToxicologicoId,
trabalhadorId: exame.trabalhadorId,
dataExame: this.datePipe.transform(exame.dataExame, "yyyy-MM-dd"),
cnpjLaboratorio: exame.cnpjLaboratorio,
codigoSequencialExame: exame.codigoSequencialExame,
medicoId: exame.medicoId.toString(),
});
console.log('Formulário atualizado com trabalhadorId:', exame.trabalhadorId);
}
});
}, 0);
});
}


Child Component

`<ng-select
[items]="getTrabalhadoresFiltrados() | async"
bindLabel="nome"
bindValue="trabalhadorId"
[multiple]="false"
placeholder="Selecione"
class="form-control custom-ng-select"
[attr.disabled]="disabled ? true : null"
[(ngModel)]="value"
(change)="onChangeSelect($event)"
>
</ng-select>


n the console, I can see that the correct trabalhadorId value is being logged, but the ng-select remains empty and doesn't display the pre-selected worker.

I have ensured that the workers are being loaded before the patchValue is called. I’m using bindValue="trabalhadorId" to ensure that the ng-select binds to the worker’s ID, not the object. I've added setTimeout to delay the patchValue to ensure that the workers are fully loaded.

Continue reading...