2

Amigos soy nuevo en Angular, ya logre hacer la pagina del registro, ahora lo que quiero hacer es poderme loguear desde una ventana emergente de SweetAlert2, estoy trabajando con ngModel, el servicio ya esta probado y funcionando, lo que me sucede es que al ejecutar el metodo "Entrar" me muesta 'Undefined' en vez del email y el pass en el console.log y por eso no lo puedo enviar al servicio AuthService, pienso que es por que no estoy ejecutando el (submit) del formulario directamente, si no que estoy llamando un metodo externo que tendria que ser llamado desde el (submit) pero no lo consigo hacer, cual seria la solucion en este caso?

  usuario: UsuarioModel;

  constructor(private auth: AuthService) {
    this.usuario = new UsuarioModel();
  }

login(): void {
    Swal.fire({
      title: 'Iniciar Sesion',

html: `<form  id="formularioEntrar" name="formulario" (submit)='entrar()'>
      <div class="input-group input-group-default mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default"><i class="far fa-envelope"></i> Correo:</span>
  </div>
  <input type="text" class="form-control" name="email" [(ngModel)]="usuario.email">
</div>
<div class="input-group input-group-default mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default"><i class="fas fa-unlock "></i>Password:</span>
  </div>
  <input type="password" class="form-control"  name="password" [(ngModel)]="usuario.password">
</div></form>`,

showCancelButton: true,
      confirmButtonText: 'Login',
      showLoaderOnConfirm: true,
      preConfirm: (login) => {
        // this.auth.signIn();
        this.entrar();
      },

allowOutsideClick: () => !Swal.isLoading(),
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
          title: 'bienvenido',
        });
      } else {
        Swal.fire({
          icon: 'error',
          title: 'Hubo un error al iniciar session, intenta de nuevo',
        });
      }
    });
  }

entrar() {
    console.log(this.usuario.email, this.usuario.password);
  }
}

1 respuesta 1

0

Tienes un problema: Angular y SweetAlert no son compatibles de la manera en la que intentas usarlos. Te explico:

Angular usa plantillas (templates) para generar el HTML, pero su sintaxis sólo la puede interpretar el render de Angular, que inyecta en el DOM los elementos en base a lo que hayas escrito.

Por ejemplo, el código:

<input type="password" class="form-control"  name="password" [(ngModel)]="usuario.password">

en una plantilla de Angular es transformado al compilarlo a una serie de instrucciones en Javascript que inyectan un input en el DOM y asocian ciertos listeners para que cualquier cambio en el input se refleje en la propiedad usuario.password de tu componente.

Pero una vez que el componente se ha compilado, no puedes,de manera externa, añadir código Angular en caliente como ése, porque el navegador es incapaz de entender qué significa la sintaxis [(ngModel)]=" ..." y el engine de Angular genera código, pero no analiza el código ya existente para intentar interpretarlo.

La solución pasa por usar @sweetalert2/ngx-sweetalert2, la versión de la librería especialmente creada para Angular.

1
  • Ahora entiendo, y creo que mas o menos tenia una idea que por ahi andaba el error, muchas gracias por tu ayuda. Commented el 8 oct. 2020 a las 4:28

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.