Angularjs form validation fails on directives

Question

I have a form on a page which is validated just fine if all the form elements are on the page, http://jsfiddle.net/nkanand4/6za8h8xg/1/.

<div ng-form="myform">
  <div>
    Name: <input type="text" ng-model="user.name" required name="input"/>
  </div>
</div>

This, however, stops working if I am doing a wizard kind of form, where each step is populated using directive, http://jsfiddle.net/nkanand4/pe17afvq/2/.

<div ng-form="myform">
  <form-element step="selectedStep"></form-element>
</div>

Any ideas on how to solve this will be appreciated. Thanks.

EDIT: I initially had started with ng-include but dropped that approach because if I use it, the data is not persisted from step 1 to step 2 to back to step 1. Reason being a new scope is created when you move back and forth. Hence I needed a way to keep all the data under a scope property, like $scope.data.user.name, so that i can pass back $scope.data when its requested.

dfsq · Accepted Answer · 2015-10-09 21:31:06Z

2

Don't compile HTML yourself, you can let Angular do it properly for you:

.directive('formElement', function($log, $templateCache, $compile) {
    return {
        template: '<div ng-include="\'step\' + selectedStep.step + \'.html\'">',
        link: function(scope, elem, attrs) {
            // ... nothing really here
        }
    };
});

Demo: http://jsfiddle.net/pe17afvq/4/

answered Oct 9, 2015 at 21:31

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Nitesh Kumar Anand Over a year ago

I updated my question with my reasons of why I did not want to use ng-include in the first place. Please suggest anything if you can. Thanks.

Nitesh Kumar Anand · Accepted Answer · 2015-10-16 01:42:49Z

0

Finally got it sorted out. This was reported as a bug on angularJS issue tracker, https://github.com/angular/angular.js/issues/7519. The trick is to use the clone in the link function that is returned when you are using $compile.

$compile(html)(scope, function(clone) {
   elem.empty().append(clone);
});

Updated my jsfiddle accordingly, and it works!

answered Oct 16, 2015 at 1:42

Nitesh Kumar Anand

6211 gold badge6 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angularjs form validation fails on directives

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related