Angular Directive to mark a field as dirty when tabbed through

Question

I've been working on an angular app where I need to be able to tab through fields

- if they are required, fail their validation
- If they are not, mark them as dirty

this way tabbing through the fields will show required fields as in error, but until they have been interacted with, they don't throw errors.

Answer 1

return {
  restrict: 'A',
  require: "ngModel",
  link: function (scope, element, attrs, modelCtrl) {
    element.bind('blur', (change) => {
      if ((element.val() == '') && (attrs.required)){
        modelCtrl.$setValidity('tabValidate', false);
      }else{
        modelCtrl.$setValidity('tabValidate', true);
      }
        modelCtrl.$setDirty();
      });
    }
};