0

soy nuevo en esto. Tengo un select option en angular 12 con una api asp.net, el problema es que al editar los campos en un formulario, no se retornan los datos que corresponden en el select option de empresa.

introducir la descripción de la imagen aquí

como se ve en la imagen los datos de la contraseña y el usuario se muestran correctamente pero la empresa que corresponde el usuario no se muestra en el select option.

archivo html

<form [formGroup]="formulario" >
            <div class="col-lg-6 form-group mb-3">
              <span class="input-group">Empresa</span>
              <select class="form-select campo-select" (change)="ChangeEmpre($event)" >
                <option value="" disabled selected>Seleccione empresa</option>
                <option [value]="emp.idEmpresa" *ngFor="let emp of empresa">
                  {{ emp.nombreComercial }}
                </option>
              </select>
            </div>
</form>


archivo typescript

 empresa:any=[];
 SelectEmpre:any;
 
   ChangeEmpre(e){
    console.log(e.target.value)
    this.SelectEmpre=e.target.value;
  }

    editClick(ce:any){
    this.SelectEmpre=ce.idEmpresa;
  }


Replique el problema en stackblitz para que el código del ejemplo fuera mas completo y legible: https://stackblitz.com/edit/angular-ivy-93j2ek?file=src/app/app.component.ts&view=editor

4
  • Buenas, para saber si tienen datos los items, se debería saber si lo que devuelve el API (Asp.net) tiene "idEmpresa" y "nombreComercial"
    – Javier
    Commented el 9 ago. 2022 a las 5:10
  • si, si tienen datos los items Commented el 9 ago. 2022 a las 6:37
  • Sería bueno que nos indiques un ejemplo como indica la ayuda es.stackoverflow.com/help/minimal-reproducible-example
    – Javier
    Commented el 9 ago. 2022 a las 9:07
  • 1
    replique mi problema en stackblitz para que sea mas entendible Commented el 9 ago. 2022 a las 9:47

1 respuesta 1

0

Te he modificado el stackblitz para que tengas un ejemplo funcionando

https://stackblitz.com/edit/angular-ivy-f9cafp?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts,src%2Fenvironments%2Fenvironment.ts&view=editor

También te dejo a continuación la explicación:

  1. Estas usando formGroup y para que te relacione los campos de tu formulario, debe estar inicializado. Esto se puede hacer en el evento onInit.
  2. Por un lado tienes los datos de tu formulario y por otro he puesto unas variables que serian las que se envien al backend (API). Esto sería mejor hacerlo directamente cogiendo el dato del formulario (lo tienes en la función logar)
  3. La función logar enlaza el evento onSubmit que tienen los formularios para recoger que el evento de enviar el formulario se ha lanzado.

Dejo por aquí las dos partes del código:

AppComponent.html

<form [formGroup]="formulario" (ngSubmit)="logar()">
  <div class="row">
    <div class="col-lg-6 form-group mb-3">
      <span class="input-group">Usuario</span>
      <input
        type="text"
        class="form-control"
        placeholder="Nombre de usuario"
        formControlName="usuario"
      />
    </div>
  </div>

  <div class="col-lg-6 form-group mb-3">
    <span class="input-group">Contraseña</span>
    <input
      type="password"
      class="form-control"
      placeholder="Contraseña"
      formControlName="contrasena"
    />
  </div>

  <!-- Selec option que no retorna los valores -->
  <div class="col-lg-6 form-group mb-3">
    <span class="input-group">Empresa</span>
    <select
      class="form-select campo-select"
      formControlName="empresa"
    >
      <option value="" disabled selected>Seleccione empresa</option>
      <option [value]="emp.idEmpresa" *ngFor="let emp of empresa">
        {{ emp.nombreComercial }}
      </option>
    </select>
  </div>

  <button type="submit">Enviar</button>

  <div>{{ usuario }}, {{ contrasena }}, {{ idEmpresa }}</div>
</form>

AppComponent.ts

import { Component, OnInit, VERSION } from '@angular/core';
import {
  FormGroup,
  FormControl,
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  formulario: FormGroup;

  constructor() {}

  ngOnInit(): void {
    this.formulario = new FormGroup({
      usuario: new FormControl(''),
      contrasena: new FormControl(''),
      empresa: new FormControl(''),
    });
  }

  empresa: any = [
    { idEmpresa: 1, nombreComercial: 'Empresa 1' },
    { idEmpresa: 2, nombreComercial: 'Empresa 2' },
    { idEmpresa: 3, nombreComercial: 'Empresa 3' },
  ];

  usuario = '';
  contrasena = '';
  idEmpresa = '';

  logar() {
    this.usuario = this.formulario.value['usuario'];
    this.contrasena = this.formulario.value['contrasena'];
    this.idEmpresa = this.formulario.value['empresa'];

    /*this.http.put(environment.API_URL + 'usuario', val).subscribe((res) => {
      this.refreshList();
      this.cerrar();
    });*/
  }
}

PD: Los datos no se sincronizan del backend (API)

Espero que te sirva

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.