1
In my template I have a button that calls the login function:
<button type="submit" name="entrar" (click)="fazerLogin()" routerLink="/home" class="login" id="login-button">Entrar</button>
I added a div in case the username or password is incorrect, the div appears showing a Toast:
<div *ngIf="alertaUsuarioIncorreto" id="toast"><div id="desc"> <i class="fa fa-close" aria-hidden="true"></i> Nome de usuário ou senha incorretos</div></div>
I declared this variable in my component:
public alertUsuarioIncorrect: Boolean = false;
This is my job:
fazerLogin(){
this.authService.fazerLogin(this.usuario);
this.alertaUsuarioIncorreto = this.authService.nomeOuSenhaErrados();
if(this.alertaUsuarioIncorreto = true){
var x = document.getElementById("toast")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}
}
Those are the duties of my service:
fazerLogin(usuario: Usuario){
if(usuario.nome === '[email protected]' &&
usuario.senha === '123'){
this.usuarioAutenticado = true;
this.router.navigate(['/home']);
}else{
this.usuarioAutenticado = false;
this.alertaSenhaErrada = true;
}
}
usuarioEstaAutenticado(){
return this.usuarioAutenticado;
}
nomeOuSenhaErrados(){
return this.alertaSenhaErrada;
}
It turns out the first time I click the button, it returns the message:
ERROR TypeError: Cannot set property 'className' of null
at LoginComponent.push../src/app/components/login/login.component.ts.LoginComponent.fazerLogin
The second time I click the button appears the message from Toast.
There’s an operator error here:
if(this.alertaUsuarioIncorreto = true){.. the correct would be two==.– Sam
This way of using Oaster is being very laborious, can you tell me which library you are using ? I remember that I passed only a few parameters in the library of Oaster that I used and already had to use with ease. I was going to tell you that this error is of name, which was missing in the div, however, I saw that in the code ero is being just in time to replace in the timeout of the classname that you are using
– Philip Developer