Angular form alanını el ile geçersiz olarak nasıl el ile yapabilirim?

Question

Giriş formunda çalışıyorum ve kullanıcı geçersiz kimlik bilgileri girdiğinde 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 ileti görüntülemek istiyoruz. Gözlemlenebilir bir geri aramadan bu alanların geçersiz olmasını ayarlamak için nasıl giderim?

Ş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şi 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; 
    }); 
    } 

true ölçüm girişlerini geçersiz bayrağı ayarlamaya ek olarak ben false email.valid bayrak ayarı denedim ve ayar loginForm.invalid da doğru. Bunların hiçbiri, girişlerin geçersiz durumunu göstermesine sebep olmaz. bileşeninde

Answer 1

:

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email" #email="ngModel"> 
<div *ngIf="!email.valid">{{email.errors| json}}</div> 

Answer 2

bileşende doğrulama hatası ayarlamak için Julia Passynkova cevabı

ekleme: Ayarı iptal etmek için

formData.form.controls['email'].setErrors({'incorrect': true}); 

formData.form.controls['email'].setErrors({'incorrect': true}); 

ve html

Doğrulama Hatası bileşeninde:

formData.form.controls['email'].setErrors(null); 

tüm hataları üzerine yazılır bu kadar 'nullunkine kullanarak hatalarını unsetting dikkatli olun. Etrafında biraz tutmak istiyorsanız, ilk önce diğer hataların varlığını kontrol etmeniz gerekebilir:

if(isIncorrectOnlyError){ 
    formData.form.controls['email'].setErrors(null); 
}