Search code examples
cssangularangular-reactive-forms

css styling for angular reactive form requiring form to be touched and invalid

I am using a reactive form to allow a user to change their password. I want to style my input boxes to show the user when the form is invalid or has some error.

input.ng-invalid {
  border: 1px solid red;
}

The problem is that this shows before the form has even been touched. I want this CSS only to apply after the form has been touched. Unsure how I can achieve this behaviour in CSS.

Solution

  • If you only want the error to be shown when it has been touched, then use the aptly named ng-touched class

    input.ng-touched.ng-invalid {
  border: 1px solid red;
}