मैं एक कोणीय फॉर्म फ़ील्ड को मैन्युअल रूप से अमान्य के रूप में कैसे सेट कर सकता हूं?

Question

मैं लॉगिन फॉर्म पर काम कर रहा हूं और यदि उपयोगकर्ता अमान्य प्रमाण-पत्रों में प्रवेश करता है तो हम दोनों ईमेल और पासवर्ड फ़ील्ड को अमान्य के रूप में चिह्नित करना चाहते हैं और एक संदेश प्रदर्शित करना चाहते हैं जो लॉगिन विफल रहा है। मैं इन क्षेत्रों को एक अवलोकन कॉलबैक से अमान्य होने के बारे में कैसे सेट करूं?

टेम्पलेट:

<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> 

लॉग इन विधि:

@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; 
    }); 
    } 

आदानों सच करने के लिए अवैध झंडा करने के साथ ही मैं गलत पर email.valid ध्वज स्थापित करने की कोशिश की है, और सेटिंग loginForm.invalid भी सत्य के लिए। इनमें से कोई भी इनपुट को उनके अमान्य स्थिति को प्रदर्शित करने का कारण नहीं बनता है।

Answer 1

घटक में

:

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

और html में:

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

Answer 2

जूलिया Passynkova के जवाब

घटक में सत्यापन त्रुटि सेट करने के लिए करने के लिए जोड़ा जा रहा है:

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

सेट नहीं करने के लिए

मान्यता त्रुटि घटक में:

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

इस रूप में 'अशक्त' का उपयोग कर सभी त्रुटियों के ऊपर लिख देगा त्रुटियों unsetting से सावधान रहें। यदि आप अपने आस-पास कुछ रखना चाहते हैं तो आपको पहले अन्य त्रुटियों के अस्तित्व की जांच करनी पड़ सकती है:

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