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.
CodePudding user response：
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;
}