How to add animation to the input field by using animate css class if form validation fails

Question

Instead of your name is required I want that animated pulse classes should be added to the input field. Both these classes are from animate.css library which displays pulse effect and the class should also be removed once the user enters a valid text to reset the animation so that the animation shows again if the user does something wrong on that input field agin.

<form method="post" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <input type="text" formControlName="first_name" name="first_name" placeholder="First Name *"/>
    <div *ngIf="registerForm.controls.first_name.errors && registerForm.controls.first_name.touched" class="error">
    <div *ngIf="registerForm.controls.first_name.errors.required">Your name is required</div>
    </div>
     <div *ngIf="submitted && registerForm.controls.first_name.errors && registerForm.controls.first_name.pristine" class="error">
    <div *ngIf="registerForm.controls.first_name.errors.required">Your name is required</div>
    </div>

.ts

    this.registerForm = this.formBuilder.group({
          first_name: ['', Validators.required],

 onSubmit() {
    this.submitted = true;
    if (this.registerForm.invalid) {
        return;
    }
}

Iftifar Taz · Accepted Answer · 2019-02-07 04:32:50Z

1

You can use ngClass directive to dynamically add or remove class to html tags. Based on the code you provided i am guessing you want to add class when input field is touched. You achieve this with reactive form control property touched and invalid.

<input [ngClass]="{'animated pulse': registerForm.get('first_name').touched && registerForm.get('first_name').invalid}" type="text" formControlName="first_name" name="first_name" placeholder="First Name *"/>

edited Feb 7, 2019 at 4:32

answered Feb 6, 2019 at 18:42

Iftifar Taz

8398 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SiKing Over a year ago

To improve the quality of your answer, could you please add some commentary as to what this code does and how it solves the original question.

Collectives™ on Stack Overflow

How to add animation to the input field by using animate css class if form validation fails

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related