Modifying AngularJS form field validation attributes asynchronously

Question

I have a situation similar to this question. My unique twist is that I receive my "dynamic" information asynchronously (via a webservice call) at some point after the page has completed its initial render/bind. So, my directive's flow is like this:

** UPDATE: Complete repro here: http://plnkr.co/edit/TIVbhGFMAQpUaMxKp9Dc?p=info

 Markup: <input dynValidate />
 Directive:

 app.directive('dynValidate',function($compile,$parse) {
      restrict: 'A', require: 'ngModel', replace: false, terminal: true,
      link: function (scope, elem, attr, ctrl) {
        var validatorKey = elem.attr('ng-model') + 'Validation';
        var installValidators = function () {
                // ...add some ng-validation attributes     
                // (omitted for brevity, but does something like elem.attr('ng-minlength','5')
                // based on metadata in the bound model
                elem.removeAttr('dynValidate'); // Remove my own directive
                $compile(elem)(scope); // recompile to incorporate new ng directives
            }
        };
        // watch for the validation metadata to arrive asynchronously
        scope.$watch(validatorKey, function() {
            installValidators(attr, ctrl);
        });
      }
  });

This sort-of works: my directive attribute is replaced by some angular validation directives and validation is functioning properly at the level of this element. The problem is that the async recompile seems to have caused the parent ng-form to lose track of the element. Specifically, the form.fieldName.$isDirty will never be set to true when the input is changed. It makes sense, since I have essentially removed the original element and replaced it with a different one, but I'm wondering if there's any mechanism which will allow me to tell the parent form that this has happened, and that it should hook up its $error/$dirty mechanism at the form level.

Thanks!

hon2a · Accepted Answer · 2014-11-24 18:53:12Z

0

I'd suggest getting the ngModel controller of the re-compiled <input> and registering it with the form's ngForm controller using $addControl.

answered Nov 24, 2014 at 18:53

hon2a

7,2545 gold badges47 silver badges60 bronze badges

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

4 Comments

jlew Over a year ago

Interesting idea, is there a way to get at the form controller from inside the directive?

hon2a Over a year ago

Require it just like you require ngModel controller (prefix name with ^ to get directive controller from ancestor element).

jlew Over a year ago

Ah cool, the require worked but it does not seem to affect the behavior in plunkr.

hon2a Over a year ago

Have you tried to $removeControl first before recompilation? Or maybe not putting ngModel on the input in the first place and adding it only when adding the rest of the attributes? Also, you must get the ngModel controller of your newly compiled element, not use the original one you required. To do that, use compiledElement.controller('ngModel').

Collectives™ on Stack Overflow

Modifying AngularJS form field validation attributes asynchronously

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related