Hola muy buenas tengo un modal con formulario de inicio de sesión , y estoy intentando cerrar el modal una vez el usuario se ha logeado pero de la manera que lo he logrado no me funciona correctamente pues si el usuario pone las credenciales incorrectas se me cierra también y eso no debería suceder, creo que se puede lograr con NgbModal pero no se como hacerlo.
Lo cierro añadiendo esto al boton del formulario data-bs-dismiss="modal"
mi html :
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<main class="form-signin">
<form [formGroup]="loginForm" (ngSubmit)="doLogin()" >
<h1 class="h3 mb-3 fw-normal">¡Bienvenido mascotero!</h1>
<div class="form-floating">
<input type="text" placeholder="Email" formControlName="email" clearInput autocapitalize="off" value="" class="form-control" id="floatingInput" >
<label for="floatingInput">Email</label>
</div>
<div class="error-container">
<ng-container *ngFor="let validation of validation_messages.email">
<div class="error-message" *ngIf="loginForm.get('email')?.hasError(validation.type) && (loginForm.get('email')?.dirty || loginForm.get('email')?.touched)">
<span>{{ validation.message }}</span>
</div>
</ng-container>
</div>
<div class="form-floating">
<input type="password" placeholder="Contraseña" formControlName="password" class="form-control" id="floatingPassword" >
<label for="floatingPassword">Contraseña</label>
</div>
<div class="error-container">
<ng-container *ngFor="let validation of validation_messages.password">
<div class="error-message" *ngIf="loginForm.get('password')?.hasError(validation.type) && (loginForm.get('password')?.dirty || loginForm.get('password')?.touched)">
<span>{{ validation.message }}</span>
</div>
</ng-container>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit" data-bs-dismiss="modal" [disabled]="!loginForm.valid">Inicioar sesion</button>
</form>
</main>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
y el codigo del ts :
import { Component, OnInit } from '@angular/core';
import { Validators, FormGroup, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { ApiService } from 'src/app/service/api/api.service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
loginForm: FormGroup;
validation_messages = {
'email': [
{ type: 'required', message: 'El email es requerido' },
{ type: 'pattern', message: 'Ingresa un email válido' }
],
'password': [
{ type: 'required', message: 'La contrseña es requerida' },
]
};
constructor(
public router: Router,
public api: ApiService,
) {
this.loginForm = new FormGroup({
'email': new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
])),
'password': new FormControl('', Validators.compose([
// Validators.minLength(6),
Validators.required
]))
});
}
ngOnInit(): void {
this.checkLocalstorage();
}
ionViewWillEnter() {
this.loginForm = new FormGroup({
'email': new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
])),
'password': new FormControl('', Validators.compose([
// Validators.minLength(6),
Validators.required
]))
});
}
checkLocalstorage() {
if (localStorage.getItem('petauction_user')) {
this.router.navigate(['home']);
}
}
async doLogin() {
var data = {
'email': this.loginForm.value['email'],
'password': this.loginForm.value['password']
};
this.api.login(data).subscribe(res => {
console.log("====== response ======: ", res);
if (res.status == '1') {
localStorage.setItem('petauction_user', JSON.stringify(res.data));
this.api.userdata = res.data;
this.router.navigate(['home']);
}else{
if(res.status == '0'){
alert(res.msg);
}
}
});
}
}
Estoy utilizando angular 13 y bootstrap