1

introducir la descripción de la imagen aquí//tengo el siguiente select en angular

<select [(ngModel)]="user.sexo" name="sexo">
   <option value="hombre" selected>Hombre</option>
   <option value="mujer">Mujer</option>
   <option value="indefinido">Prefiero no decirlo</option>
</select>

//aqui esta el component.ts para recibir los datos, recivo todos los datos perfectamente pero los del select no, cual seria el problema aca?

user = {
  nombre: "",
  apellido: "",
  username: "",
  email: "", //aqui creo las variables para guardar los datos que traigo del html
  birth: "",
  sexo: "",
  password: "",
  confirmPassword: "",
};

register(e) {
  console.log(this.user);

  if (this.user.nombre.length < 2) {
    return false;
  } else if (this.user.apellido.length < 2) {
    return false;
  } else if (this.user.username.length <= 4) {
    return false;
  } else if (this.user.email.length < 8) {
    //aqui deberia ir los componentes que le avisan al usuario el error que cometieron
    return false;
  } else if (this.user.sexo == "") {
    return false;
  } else if (this.user.password.length < 8) {
    return false;
  } else if (this.user.password != this.user.confirmPassword) {
    return false;
  } else {
    this.autService.register(this.user).subscribe(
      (res) => {
        console.log(res);
        localStorage.setItem("token", res.token);
        this.route.navigate(["inicio"]);
      },
      (err) => {
        console.log(err.error);
      }
    );
  }
};

estoy empezando con angular y no se cual podria ser el error aqui, les agradeceria mucho si me ayuda, buenas noches.

7
  • puedes poner lo que sale en el console.log(this.user). Aquí tienes un error te falta un igual debería ser this.user.sexo == ''
    – hawks
    Commented el 18 abr. 2020 a las 10:54
  • ya lo modifico y subo lo que me devuelve el console.log(this.user)
    – Enzo
    Commented el 18 abr. 2020 a las 11:00
  • modificando el error que tenias del igual no te va?
    – hawks
    Commented el 18 abr. 2020 a las 11:19
  • no, sigo obteniendo un string vacio
    – Enzo
    Commented el 18 abr. 2020 a las 11:20
  • 1
    a mi me funciona correctamente quizás el problema esta en otro sitio. stackblitz.com/edit/angular-2ppen5. Actualiza el error en tu pregunta que he comentado para no crear confusión a otras personas de SO.
    – hawks
    Commented el 18 abr. 2020 a las 11:32

3 respuestas 3

1
+50

Puedes hacer uso de ngModel para obtener el valor seleccionado.

<select name="sexo" [(ngModel)]="selectedOption">
    <option *ngFor="let item of listOptions" [ngValue]="item" >
    {{item.name}}</option>
</select>

<pre>{{ this.selectedOption | json}}</pre>

Código Ts

export class AppComponent  {
    listOptions = [
    {
        id:0,
        name:'Hombre'
    },
    {
        id:1,
        name:'Mujer'
    },
    {
        id:2,
        name:'Prefiero no decirlo'
    },
]

selectedOption = this.listOptions[0];

}

Dejo un ejemplo en stackBlitz: https://stackblitz.com/edit/angular-hcbank

0

si usas [(ngFmodel)] tienes que usar [ngValue] en los options del select.

Te adjunto un ejemplo en stackblitz

No obstante, te recomiendo que te leas la sección Forms del manual de angular para tener un mejor control de los formularios y que de cara a validaciones y demás te resulte más fácil

1
  • El ejemplo debería ir aquí amigo así se preserva la información
    – user128299
    Commented el 19 abr. 2020 a las 21:54
0

Por lo que estoy viendo en tu ngmodel necesitas añadir una variable a la etiqueta y te deberia quedar algo asi:

<select [(ngModel)]="user.sexo" name="sexo" #sexo="ngModel">
   <option value="hombre" selected>Hombre</option>
   <option value="mujer">Mujer</option>
   <option value="indefinido">Prefiero no decirlo</option>
</select>

Por si no te percatas del cambio ya que es muy sutil, simplemente he añadido #sexo="ngModel"

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.