0

estoy tratando de obtener un valor de la base de datos y ponerlo en un select cuando el usuario actualiza los campos en un formulario, pero solo se muestra "seleccione empresa" y no el valor que le corresponde.

lo que echo es lo siguiente: 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=>{
    });
  }
1
  • ¿Y en dónde se asignan los valores de empresa?
    – Lobos
    Commented el 25 jun. 2022 a las 15:56

1 respuesta 1

0

En este caso el problema que estas teniendo es que dentro de la función ChangeValue no estas asignandolo al modelo que le corresponde. Pero lo mejor es hacerlo por ngform o por reactive forms.

<form [formGroup]="form">
    <select formControlName="empresa">
        <option *ngFor="let emp of empresa" [ngValue]="emp">
          {{emp.nombreComercial}}
        </option>
    </select>
</form>

Y en el .ts deberías declarar

form = new FormGroup({
    empresa: new FormControl(),
});

Si quieres usar la forma de acceder mediante el template el codigo sería

<form #f="ngForm">
      <select name="empresa" ngModel>
        <option value="" disabled>Elige una empresa</option>
        <option *ngFor="let emp of empresa" [ngValue]="emp">
          {{emp.nombreComercial}}
        </option>
      </select>
</form>

Aquí esta la documentación oficial de angular https://angular.io/api/forms/SelectControlValueAccessor

El evento (change)="ChangeValue($event)" lo puedes seguir utilizando de la misma manera para actualizar cualquier otra variable que necesites.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.