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

user_10727547 0
Viewed 1079

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.

angular-reactive-forms angular css
1 Answers

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

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