input:invalid is not working with formcontrol

Issue

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

<input type="text" [formControl]="NameCtrl">

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

input:invalid {
  background-color: red;
}

<input type="text" required>

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

Solution

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.

more details here for invalid pseudo selector

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;
}

forked stackblitz

Answered By - Naren Murali