CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-form
Nitesh Kumar Anand
Nitesh Kumar Anand

Reputation: 621

Angularjs form validation fails on directives

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.

Upvotes: 2

Views: 73

Answers (2)

Nitesh Kumar Anand
Nitesh Kumar Anand

Reputation: 621

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!

Upvotes: 0

dfsq
dfsq

Reputation: 193261

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/

Upvotes: 2

Related Questions