CODEWITHSUNDEEP
cssangular
xasini
xasini

Reputation: 99

How to add transition to this div

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

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

ts file

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

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

The script adds a div when the form is submitted and if the ng if condition is true and shows the error inside the span. The two functions in the above ts file hides the error message if the user puts the focus back inside the input box after having clicked on the button to submit the form. It works the error div hides and shows but its doesn't look pretty so is there a way to add transition ?

<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 *"/>

Upvotes: 0

Views: 112

Answers (1)

Marcin Piotrowski
Marcin Piotrowski

Reputation: 101

You can use angular-animations to animate error message: https://www.npmjs.com/package/angular-animations

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

Remember to add functions definitions in .ts file:

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...'],
    animations: [
        zoomInOnEnterAnimation(),
        zoomOutOnLeaveAnimation()
    ]
})

Upvotes: 4

Related Questions