CODEWITHSUNDEEP
htmlcssangularinputcss-selectors
WasiF
WasiF

Reputation: 28939

input:invalid is not working with formcontrol

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.

Upvotes: 2

Views: 863

Answers (1)

Naren Murali
Naren Murali

Reputation: 58767

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

Upvotes: 1

Related Questions