How can I check transcluded form's validity in directive?

Question

Rewriting this question for clarification

How can I check transcluded form's validity in directive ? I would like to check myForm.$valid in link function of directive. I will inject different sort of forms into my directive or use my directive in different forms you can say

Difficulty is that scope is isolated and non of following answer worked for me.

Please find complete code here,

https://plnkr.co/edit/K3IrE5KVehWXFM9JEMvE?p=preview

I want to disable "Save" button when form is not valid.

Answer 1

To answer your primary question, you can expose and bind the form like any other model value:

angular.module("main", [])
  .directive("formDirective", formDirective);

function formDirective() {
  return {
    restrict: "A",
    scope: {
      formModel: "=formModel"
    },
    link: function (scope, element, attrs) {
      scope.$watch("formModel.$valid", function (newValue, oldValue) {
       console.log(newValue, oldValue);
      });
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main">
 <div form-directive form-model="myForm">
    <div>
    <form name="myForm">
       <div>
        <input type="text" ng-model="name" required="required">
       </div>
         Valid: {{myForm.$valid}}
    </form>
    <div>
 </div>
</div>

However, as became clear from our conversation on chat, your overall problem is more complicated.

I have added a working example here: https://plnkr.co/edit/lkfdmc0PLRadfYFVhFAm?p=preview

The key aspects to realize here are:

• You're opening a modal dialog with $uibModal.open, which will instantiate the referenced controller editCtrl and load your template editCtrl.html.
• The loading process includes that Angular is compiling the template. This template includes a directive at the root level, so that directive needs to be compiled as well.
• That directive uses transclusion and loads the template dialog.html. It is important to note here, that the scope of your esDlg directive is now available in the template of dialog.html, so you can access all properties defined in the scope of the directive declaration.
  You've already been making use of this with the dialog title and text.
• All we need to do is to bind the validity information here as well, so that we can use it in the dialog.

Answer 2

angular.module("main", [])
  .directive("formDirective", formDirective);

function formDirective() {
  return {
    restrict: "A",
    scope: {
      formModel: "=name"
    },
    link: function (scope, element, attrs) {
      scope.$watch("formModel.$valid", function (newValue, oldValue) {
       console.log(newValue, oldValue);
      });
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main">
 <div my-directive>
    <div>
    <form name="myForm" form-directive>
       <div>
        <input type="text" ng-model="name" required="required">
       </div>
         Valid: {{myForm.$valid}}
    </form>
    <div>
 </div>
</div>

I advise you to use angular-auto-validate

Answer 3

Are you defining the directive properly? Check out this plunker where validity's logged as you would expect.

function MyDirective() {
  return {
    restrict: 'AE',
    scope: true,
    link: function (scope, element, attrs) {
      scope.$watch('myForm.$valid', function (validity) {
        console.log(validity);
      });
    }
  }
}

Answer 4

I created a plunk from your code and it seems to be working fine. Just remember, it will generate a log only when validity state of your form changes from valid to invalid or vice versa.

https://plnkr.co/edit/lW3e4p

  <div ng-app="my-app">
    <div ng-controller="testCtrl">
      <div my-directive>
         <form name="myForm">
           <input type="number" step="0.01" ng-model="rate" required>
         </form>
      </div>
    </div>
  </div>

Angular:

angular.module('my-app').directive('myDirective', function() {
  return {
    link: function(scope, element, attr, mCtrl) {
      scope.$watch('myForm.$valid', function(validity) {
        console.log(validity);
      })
    }
  };
});