ng-invalid is applied to empty input elements.

[ken.h...@sentient.ai]

Greetings,

I'm a big fan of Angular and have been developing a real world app with it for a few months now.  One aspect that is tripping me up from a UX perspective is using "ng-invalid" with input elements.  Imagine we have a form with a number of input elements which have no reasonable default value.  NG automatically adding a style of .ng-invalid results in all of those inputs being styled as invalid.  I am of the opinion that this is not ideal and that empty elements should be considered valid and instead dealt with using ng-required.  I think this would result in cleaner code and improved UX.  That said, perhaps there is something I don't understand here and I am hopeful someone can set me straight.

Thank for your time!

Ken

 

[ken.h...@sentient.ai]

To be more clear: the invalid style is applied to the input elements when the form is initially rendered and before the user has had a chance to enter data.  My user's don't like this: it's too in your face but I don't see a way around this side effect if I continue to use an ng-invalid style.

[Sander Elias]

Hi Ken,

.

You can use a combined selector to cancel out the invalid styling.

something like:

.ng-invalid {
    border:2px solid red;
}
.ng-invalid.ng-pristine {
    border:1px solid black;
}

You can see it in action here

[ken.h...@sentient.ai]

Thank you, Sander!  I had that idea on the way home last night and was just about to look it up.  BTW, contract we use told me manually sets some of the form validation values to deal with similar issues.  Is that a best practice, e.g., setting pristine when he knows the form is untouched?

Regards,

Ken