.login-error {
    text-align: center;
    margin-bottom: 15px;
}

.login-error span {
    background: #e03030;
    padding: 2px 28px 2px 28px;
}

टीएस फ़ाइल

focusPasswordInput() {
    this.loginForm.controls.password.markAsUntouched();
}

focusEmailInput(){
    this.loginForm.controls.email.markAsUntouched();
}

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

<div *ngIf="(loginError && loginForm.controls.email.touched) && (loginForm.controls.password.touched) " class="login-error">
   <span>Email or Password incorrect</span>
</div>
<input type="text" formControlName="email" name="email" (focus)="focusEmailInput()" placeholder="email *"/>
<input type="text" formControlName="password" (focus)="focusPasswordInput()" placeholder="Password *"/>
0
xasini 11 फरवरी 2019, 11:16

1 उत्तर

सबसे बढ़िया उत्तर

आप त्रुटि संदेश को चेतन करने के लिए कोणीय-एनिमेशन का उपयोग कर सकते हैं: https://www.npmjs.com/package /कोणीय एनिमेशन

<div [@zoomInOnEnter]
    [@zoomOutOnLeave]
    *ngIf="(loginError && loginForm.controls.email.touched) && (loginForm.controls.password.touched)"
    class="login-error">
    <span>Email or Password incorrect</span>
</div>

.ts फ़ाइल में फ़ंक्शन परिभाषाएँ जोड़ना याद रखें:

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...'],
    animations: [
        zoomInOnEnterAnimation(),
        zoomOutOnLeaveAnimation()
    ]
})
4
Nguyen Phong Thien 11 फरवरी 2019, 11:33