validation of a form added with a directive

Question

I would like to access the content of the validation variables provided from AngularJS for the forms. I need to add forms using a directive like in the code, but if I do that I can't access the $dirty,$error,$invalid variables anymore and I need to access them.

JS:

myApp.directive('test', function() {
  return {
    scope : {
      nameform: "=",
      nameinput: "=",
      type: "="
    },
    template: '<form name=nameform></form>',
    restrict: 'E',
    compile: function (elem,attr){
      var form = elem.find("form");
      if(attr.type == "text")
        form.html('<input type="text" name="nameinput" ng-model="data.text" placeholder="type here..." required />');

    }
  };
});

HTML:

<test nameform="valform" nameinput="valinput" type="text"/>
{{valform.valinput.$invalid}}

score 1 · Answer 1 · answered Feb 06 '14 at 15:41

1

I think that you can't. Because you are using isolated scope for building your directive, so you don't have acces to the information. You can try to build you directive using share scope, and I think that you would be able to access this information.

answered Feb 06 '14 at 15:41

jvrdelafuente

1,992
14
23

in which way? do you have any suggestions? – pirata000 Feb 06 '14 at 15:53
can you show the html that generate your directive? – jvrdelafuente Feb 06 '14 at 16:05

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Change your directive to be ng-form instead of form (because ng-form is nestable). Then wrap your directive inside another form element and give that new form element a name. The outer form element will bind to your outer scope and you can access the properties that way.

Directive template:

"<ng-form name="valform"></ng-form>"

HTML:

  <body ng-view>
    <div>Valid: {{outerform.$valid}}</div>
    <div>Errors: {{outerform.$error}}</div>
    <form id="outerform" name="outerform">
    <test type="text"/>
    </form>
  </body>

Side note, form names don't play nice with dynamic names. The plunkr below uses static names so I could help you with your current problem. I found a solution to the dynamic name problem on a different SO post...I think this one... Dynamic validation and name in a form with AngularJS

Here's a plnkr with your working form... http://plnkr.co/edit/RFrRXp2kWkP1Mefwl3Kn?p=preview

edited May 23 '17 at 10:25

Community

1
1

answered Feb 06 '14 at 15:59

Craig Squire

2,141
14
13

Thanks, but I need also to put the form in a cell of a table, and the table is made with ng-repeat. If I put the test-element in the it doesn't work anymore. – pirata000 Feb 07 '14 at 08:38
and I need to see the $scope element in the controller, like $scope.mainform.innerform1.$dirty, $scope.mainform.innerform2.$dirty, etc... the big problem I have now is to give a different name each form – pirata000 Feb 07 '14 at 09:32
I had to solve the same problem with a form and ng-repeat, with each inner form having a different name. That's where I made another directive called "dynamicName" which would allow me to assign different names to the inner forms for each iteration of the ng-repeat. Each of my items has a UUID associated with it, so I used the UUID of each item as the name of each inner form...as well as using the UUID for the name of each input field. So, I ended up with every input field having its own ng-form around it, then a parent form around the whole thing. – Craig Squire Feb 07 '14 at 13:40
Here's an example with ng-repeat and a table. http://plnkr.co/edit/RFrRXp2kWkP1Mefwl3Kn – Craig Squire Feb 07 '14 at 14:16

score 0 · Answer 3 · answered Jun 08 '14 at 13:45

When you build your HTML for your input controls, make sure you append the name attribute correctly based on 'nameinput' passed in as an attribute:

myApp.directive('test', function() {
   return {
      scope : {
         nameform: "=",
         nameinput: "=",
         type: "="
      },
      template: '<form name=nameform></form>',
      restrict: 'E',
      compile: function (elem,attr){
           var form = elem.find("form");
           if(attr.type == "text")
                form.html('<input type="text" name="' + attr.nameinput +'" ng-model="data.text" placeholder="type here..." required />');

      }
   };
});

validation of a form added with a directive

3 Answers3