Child pages
  • Validation UX

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

You can overwrite this value by given providing your own .ng-invalid class. 

This ng-invalid class is set on the component when a validation error occurs on the server or the onDataChange returns false.

...

So in the link function we ask also for the ngModel of this component, then in the callback we are looking if the returnval is a boolean or a string if that is true or value. If it is a string value , or a false then we call the ngModel method $setValidity() to let the system know that this component is in an invalid state.

The string value is then set as the tooltip (and we remember the tooltip that it really had)

The ngModel controller then sets the class ng-invalid on this component.

If there is no return value (or true) then we are setting the validity to true again and the ng-invalid class will be removed from the classes of this component. Also the tooltip is restored to the normal value.