Réécriture de cette question pour clarification

Comment puis-je vérifier la validité du formulaire transclus dans la directive? Je voudrais vérifier myForm.$valid dans link function de la directive. Je vais injecter différents types de formulaires dans ma directive ou utiliser ma directive sous différentes formes, vous pouvez dire

La difficulté est que la portée est isolée et que la non-réponse suivante a fonctionné pour moi.

Veuillez trouver le code complet ici,

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

Je souhaite désactiver le bouton "Enregistrer" lorsque le formulaire n'est pas valide.

10
Mathematics 9 août 2016 à 16:38

4 réponses

Meilleure réponse

Pour répondre à votre question principale, vous pouvez exposer et lier le formulaire comme toute autre valeur de modèle:

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>

Cependant, comme il est devenu clair à partir de notre conversation sur le chat, votre problème global est plus compliqué.

J'ai ajouté un exemple de travail ici: https://plnkr.co/edit/lkfdmc0PLRadfYFVhFAm?p=preview

Les aspects clés à réaliser ici sont:

  • Vous ouvrez une boîte de dialogue modale avec $uibModal.open, qui instanciera le contrôleur référencé editCtrl et chargera votre modèle editCtrl.html.
  • Le processus de chargement inclut qu'Angular compile le modèle. Ce modèle inclut une directive au niveau racine, de sorte que cette directive doit également être compilée.
  • Cette directive utilise la transclusion et charge le modèle dialog.html. Il est important de noter ici que la portée de votre directive esDlg est désormais disponible dans le modèle de dialog.html, afin que vous puissiez accéder à toutes les propriétés définies dans le scope de la déclaration de directive.
    Vous l'avez déjà utilisé avec le titre et le texte de la boîte de dialogue.
  • Tout ce que nous devons faire est de lier les informations de validité ici également, afin de pouvoir les utiliser dans la boîte de dialogue.
8
Der Hochstapler 24 août 2016 à 10:34

J'ai créé un plunk à partir de votre code et il semble bien fonctionner. N'oubliez pas, il ne générera un journal que lorsque l'état de validité de votre formulaire passe de valide à invalide ou 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>

Angulaire:

angular.module('my-app').directive('myDirective', function() {
  return {
    link: function(scope, element, attr, mCtrl) {
      scope.$watch('myForm.$valid', function(validity) {
        console.log(validity);
      })
    }
  };
});
2
Dev Shah 9 août 2016 à 14:11

Définissez-vous correctement la directive? Découvrez ce plunkervalidity est connecté comme vous vous en doutez.

function MyDirective() {
  return {
    restrict: 'AE',
    scope: true,
    link: function (scope, element, attrs) {
      scope.$watch('myForm.$valid', function (validity) {
        console.log(validity);
      });
    }
  }
}
2
chris 9 août 2016 à 14:00
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>

Je vous conseille d'utiliser angular-auto-validate

3
Rafael Teles 10 août 2016 à 18:46