input:invalid is not working with formcontrol

Question

I have an input that has a FormControl and I want it to work with :invalid i.e.

scss

input:invalid {
   background-color: red;
}

html

but it is not working with it. Although it is working with required i.e.

input:invalid {
  background-color: red;
}

How to decorate input field with error styles with FormControl. Any idea, solution, or workaround would be highly appreciated.

Naren Murali · Answer

Invalid pseudo selector works only for basic HTML validation, for example.

I enter 'hello' as the value for an input field with type as email then only invalid will work.

When dealing with angular :invalid is pretty useless, instead use the classes inserted by angular form validations, as shown below!

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