CODEWITHSUNDEEP
javascriptangularjs
Mathematics
Mathematics

Reputation: 7618

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

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.

Upvotes: 10

Views: 477

Answers (4)

Oliver Salzburg
Oliver Salzburg

Reputation: 22099

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.

Upvotes: 8

Rafael Teles
Rafael Teles

Reputation: 2748

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

Upvotes: 3

Dev Shah
Dev Shah

Reputation: 302

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);
      })
    }
  };
});

Upvotes: 2

chris
chris

Reputation: 1817

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);
      });
    }
  }
}

Upvotes: 2

Related Questions