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