Bir oturum açma formu üzerinde çalışıyorum ve kullanıcı geçersiz kimlik bilgileri girerse, hem e-posta hem de şifre alanlarını geçersiz olarak işaretlemek ve oturum açma işleminin başarısız olduğunu belirten bir mesaj görüntülemek istiyoruz. Bu alanları gözlemlenebilir bir geri aramadan geçersiz olarak ayarlamak için nasıl bir yol izlemeliyim?
Şablon:
<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>
Giriş yöntemi:
@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;
});
}
Girdiler geçersiz bayrağını true olarak ayarlamanın yanı sıra, email.valid
bayrağını false olarak ayarlamayı ve loginForm.invalid
bayrağını da true olarak ayarlamayı denedim. Bunların hiçbiri girdilerin geçersiz durumlarını görüntülemesine neden olmuyor.
bileşen içinde:
formData.form.controls['email'].setErrors({'incorrect': true});
ve HTML'de:
<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email" #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>
Julia Passynkova'nın cevabına ekleme
Bileşende doğrulama hatasını ayarlamak için:
formData.form.controls['email'].setErrors({'incorrect': true});
Bileşendeki doğrulama hatasını kaldırmak için:
formData.form.controls['email'].setErrors(null);
Tüm hataların üzerine yazılacağı için null
kullanarak hataların ayarını kaldırırken dikkatli olun. Bazılarını saklamak istiyorsanız, önce diğer hataların varlığını kontrol etmeniz gerekebilir:
if (isIncorrectOnlyError){
formData.form.controls['email'].setErrors(null);
}
Kontrol adı mat önekiyle başlayan materyal 2'nin yeni sürümünde setErrors() çalışmaz, bunun yerine Juila'nın cevabı şu şekilde değiştirilebilir:
formData.form.controls['email'].markAsTouched();