I am trying to get a value from the database and put it in a select when the user updates the fields in a form, but only "select company" is displayed and not the value that corresponds to it.
what I echo is the following: HTML
<div class="col-lg-6 form-group mb-3">
<span class="input-group">Empresa</span>
<select class="form-select campo-select" (change)="ChangeValue($event)">
<option [value]="emp.idEmpresa" *ngFor="let emp of empresa" >
{{emp.nombreComercial}}
</option>
</select>
</div>
typescript
SelectValue:any;
ChangeValue(e){
console.log(e.target.value)
this.SelectValue=e.target.value;
}
this.http.get<any>(environment.API_URL+'usuario')
.subscribe(data=>{
this.usuarios=data;
});
editClick(ce:any){
this.modalTitle="Editar usuario";
this.idUsuario=ce.idUsuario;
this.usuario=ce.usuario;
this.idEmpresa=ce.idEmpresa;
}
updateClick(){
var val={
idUsuario:this.idUsuario,
usuario:this.usuario,
idEmpresa:this.SelectValue,
};
this.http.put(environment.API_URL+'usuario',val)
.subscribe(res=>{
});
}
In this case the problem you are having is that within the ChangeValue function you are not assigning it to the corresponding model. But the best is to do it by ngform or by reactive forms.
And in the .ts you should declare
If you want to use the way to access through the template, the code would be
Here is the official angular documentation https://angular.io/api/forms/SelectControlValueAccessor
You can still use the event
(change)="ChangeValue($event)"
in the same way to update any other variables you need.