How to set input field validation in reusable custom directive?

Question

I'm trying to make a reusable custom directive that will validate date in input field. Code provided below is working, however is not reusable at all which is my biggest concern. What I was trying to do, was to set a new scope in directive however I got an error:

Multiple directives requesting isolated scope.

So I guess isolated scope is not going to help me.

Any other solutions?

That's my first template:

<form ng-submit="add()" name="addTask" class="form-horizontal">
  <input name="dateInput" is-date-valid type="text" class="form-control" ng-model="task.DueDate" datepicker-options="datepicker.options" ng-model-options="{ timezone: 'UTC' }" uib-datepicker-popup="mediumDate" is-open="isOpened" required>
</form>

That's my second template:

<form ng-submit="edit()" name="editTask" class="form-horizontal">
  <input name="dateInput" is-date-valid type="text" class="form-control" ng-model="task.DueDate" datepicker-options="datepicker.options" ng-model-options="{ timezone: 'UTC' }" uib-datepicker-popup="mediumDate" is-open="isOpened" required>
</form>

And that's my custom directive:

function isDateValid($log) {
  'ngInject';
  var directive = {
    restrict: 'A',
    require: 'ngModel',
    link: link
  };
  return directive;

  function link(scope, element, attrs, ctrl) {

    scope.$watch(attrs.ngModel, function () {
      var validation = can_i_get_this_from_controller ?

        if (validation) {
          ctrl.$setValidity('validation', true);
        } else {
          ctrl.$setValidity('validation', false);
        }
    });
  }
}

module.exports = isDateValid;

You can try to use ctrl.$setValidity('validation', value); in your case. — Stanislav Kvitash
– Stanislav Kvitash, Commented May 29, 2017 at 12:21
@StanislavKvitash: Thanks, this part now works. Could help me with validation variable? How can I get it from ngModel controller? I would like to receive true or false. — arielkuzminski
– arielkuzminski, Commented May 29, 2017 at 13:22
I think, you should not get it from controller, but put this validation logic inside the directive. Btw, try avoid using $watch, this is not a good practice to use for validation - take a look at @madhur answer, his approach is better. — Stanislav Kvitash
– Stanislav Kvitash, Commented May 29, 2017 at 13:38

madhur · Accepted Answer · 2017-05-29 12:11:33Z

1

The way you implemented the custom validator is not good, you should be doing something like this -

.directive('dateValidate', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
           ngModel.$validators.dateValidate = function(modelValue) {  
               //Your logic here, return true if success else false
           }
        }
    };
 });

It can be used on both form paths, so no need of that logic here. To know more about these this is one good resource

answered May 29, 2017 at 12:11

madhur

1,0111 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set input field validation in reusable custom directive?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related