Je travaille sur un formulaire de connexion et si l'utilisateur entre des informations d'identification non valides, nous voulons marquer les champs e-mail et mot de passe comme non valides et afficher un message indiquant que la connexion a échoué. Comment puis-je définir ces champs pour qu'ils ne soient pas valides à partir d'un rappel observable?
Modèle:
<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
<div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
<md-input-container>
<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
</md-input-container>
<md-input-container>
<input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
</md-input-container>
<p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
<div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
<md-checkbox class="remember-me">Remember Me</md-checkbox>
<a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
</div>
<button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
<p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
</div>
</form>
Méthode de connexion:
@ViewChild('loginForm') loginForm: HTMLFormElement;
private login(formData: any): void {
this.authService.login(formData).subscribe(res => {
alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
}, error => {
this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.
this.loginForm.controls.email.invalid = true;
this.loginForm.controls.password.invalid = true;
});
}
En plus de définir l'indicateur non valide des entrées sur true, j'ai essayé de définir l' email.valid
indicateur sur false et de définir également le paramètre loginForm.invalid
sur true. Aucun de ces éléments ne provoque l'affichage de l'état invalide des entrées.
setErros
méthode. Conseils: Vous devez ajouter le validateur requis sur votre fichier de composant. Existe-t-il également une raison spécifique d'utiliser ngModel avec des formes réactives?