angularjs ng-form inside directive

Question

i have a custom form directive which creates an ng-form inside it. i want to use this form in the transcluded elements, to disable buttons etc, but its not working.. PLUNKER LINK

app.directive("myform", function(){

  var templateFn = function(tElement, tAttrs){
    var html = '<div ng-form="' + tAttrs.name + '">' 
    html += '<div ng-transclude=""></div>'
    html += '</div>'
    return html;
  };

  return {
    restrict: 'E',
    template: templateFn,
    scope: {list: '='},
    transclude: true
  }

});

this is how i am using it

<myform name="example">
   <input type="text" required ng-model="name2"/>
   <button ng-disabled="example.$invalid"> button </button>        
</myform>

do i need to compile the template during link?? i thought as the template is used and the linking is happening latter, the $compile would be taking care of that..

the generated html is as expected, except that button is not disabled

     <myform name="example" class="ng-isolate-scope">
     <div ng-form="example" class="ng-pristine ng-invalid ng-invalid-required">
       <div ng-transclude="">
             <input type="text" required="" ng-model="name2" class="ng-scope ng-pristine ng-invalid ng-invalid-required">
             <button ng-disabled="example.$invalid" class="ng-scope"> button </button>
       </div>
       </div>
     </myform>

Michael Kang · Accepted Answer · 2014-08-03 07:34:03Z

1

When you transclude the contents, have it link to the same isolated scope as ng-form (instead of the parent scope which is the default):

app.directive("myform", function(){

  var templateFn = function(tElement, tAttrs){
    var html = '<div ng-form="' + tAttrs.name + '">' 
    html += '<div></div>'
    html += '</div>'
    return html;
  };

  return {
    restrict: 'E',
    template: templateFn,
    scope: {list: '='},
    transclude: true, 
    link:function(scope, element, attr, ctrl, transcludeFn) {
      var e = element.find('div');

      transcludeFn(scope, function(clone) {
        angular.element(e[1]).append(clone);
      });
    }
  }

});

Demo Plunker

edited Aug 3, 2014 at 7:34

answered Aug 3, 2014 at 7:23

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

3 Comments

harishr Over a year ago

does it has anything to do with pre-linking/post-linking concept??

harishr Over a year ago

there is one small problem though, the require ^myform is not working, i have made few changes... PLUNKER LINK

Michael Kang Over a year ago

I am not sure, but I think it has to do with how the input fields find the parent form on the scope. As to why ^csForm is not working, the case is incorrect. in the HTML you have csform (all lowercase), but in the directive you have csForm (camel case)

Collectives™ on Stack Overflow

angularjs ng-form inside directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related