Show red border only on invalid fields

[rockstarjindal]

So the way validation currently works is that it sets 'has-success' 'has-errors' on parent and children both.

Assuming a parent div has multiple elements where one of them is invalid, all of the rest of the fields also go red because somehow browser is preferring has-error class (which is farther dom-wise) over has-success class.

Logically we should have has-success and has-error on parent elements to know the whole form status at a glance but that shouldn't change the css attribute of children elements.

E.g. Form with invalid date where all the fields are in red

After date correction all the fields go green

[ebrehault]

+1

[WhileTrueEndWhile]

This works for me:

.form-control.ng-untouched,
.form-control.ng-valid {
    border-color: #ccc !important;
}

Is this the "official way to go" at least at the moment?

[ebrehault]

Simple solutions are good solutions :)

[sacse2010]

// Working fine .form-control.ng-untouched, .form-control.ng-valid { border-color: #ccc !important; }

[rautNitesh]

What if the response is coming back from the backend ? may be like this { name:["name fields exceeds its character limit"] ,......} How can we achieve the same in such case ? I am pretty beginner in this field so don't mind If I sound stupid.