AngularJs ne peut pas accéder à un object de formulaire dans le contrôleur ($ scope)

Je me sers de bootstrap-ui plus spécifiquement des fenêtres modales. Et j’ai une forme dans un modal, ce que je veux, c’est instancier un object de validation de formulaire. Donc, fondamentalement, je fais ceci:

 {{form | json}} </pre 

Je peux voir l'object de formulaire dans le fichier HTML sans aucun problème, cependant si je veux accéder à l'object de validation de formulaire à partir du contrôleur. Il me sort juste un object vide. Voici l'exemple du contrôleur:

 .controller('EditQuestionCtrl', function ($scope, $modalInstance) { $scope.question = {}; $scope.form = {}; $scope.update = function () { console.log($scope.form); //empty object console.log($scope.question); // can see form input }; }); 

Quelles pourraient être les raisons pour lesquelles je ne peux pas accéder à $scope.form partir du contrôleur?

Juste pour ceux qui n’utilisent pas $scope , mais plutôt, dans leur contrôleur, vous devrez append l’alias de contrôleur précédant le nom du formulaire. Par exemple:

 

et ensuite sur le contrôleur:

 app.controller('ClientsController', function() { // setting $setPristine() this.something.$setPristine(); }; 

J’espère que cela consortingbue également à l’ensemble des réponses.

La manière normale si ng-controller est un parent de l’élément de formulaire: veuillez supprimer cette ligne:

 $scope.form = {}; 

Si angular définit le formulaire sur vos contrôleurs $scope vous le remplacez par un object vide.


Comme l’OP a déclaré que ce n’est pas le cas ici. Il utilise $modal.open , donc le contrôleur n’est pas le parent du formulaire. Je ne connais pas de solution intéressante. Mais ce problème peut être piraté:

 
...

et dans votre contrôleur:

 $scope.setFormScope= function(scope){ this.formScope = scope; } 

et plus tard dans votre fonction de mise à jour:

 $scope.update = function () { console.log(this.formScope.form); }; 

Regardez le code source du ‘modal’ de l’interface utilisateur angular, vous verrez que la directive a

 transclude: true 

Cela signifie que la fenêtre modale créera une nouvelle étendue d’enfant dont le parent est ici la scope du contrôleur, en tant que frère de la scope de la directive. Le formulaire ne peut alors être accessible que par la scope enfant nouvellement créée.

Une solution consiste à définir une variable dans la scope du contrôleur, comme

 $scope.forms = {}; 

Ensuite, pour le nom du formulaire , nous utilisons quelque chose comme forms.formName1 . De cette façon, nous pourrions toujours y accéder depuis notre contrôleur en appelant simplement $scope.forms.formName1 .

Cela fonctionne parce que le mécanisme d’inheritance dans JS est la chaîne prototype. Lorsque la scope enfant essaie de créer le forms.formName1 , il essaie d’abord de trouver l’object formulaires dans sa propre scope, ce qui ne le permet certainement pas, car il est créé à la volée. Ensuite, il essaiera de le trouver depuis le parent (jusqu’à la chaîne prototype) et ici, puisque nous l’avons défini dans la scope du contrôleur, il utilise cet object ‘ forms ‘ que nous avons créé pour définir la variable formName1 . En conséquence, nous pourrions toujours l’utiliser dans notre contrôleur pour faire notre travail comme:

 if($scope.forms.formName1.$valid){ //if form is valid } 

En savoir plus sur la transclusion, regardez la vidéo de Misco ci-dessous de 45 min. (c’est probablement l’explication la plus précise de ce que les scopes transcludedes sont ce que j’ai jamais trouvé !!!)

http://www.youtube.com/watch?v=WqmeI5fZcho

Pas besoin de la supercherie ng-init, car le problème est que $scope.form n’est pas défini lorsque le code du contrôleur est exécuté. Supprimez l’initialisation form = {} et accédez au formulaire à l’aide d’une montre:

 $scope.$watch('form', function(form) { ... }); 

J’utilise l’approche documentée.

https://docs.angularjs.org/guide/fr/forms

donc, utilisez le nom du formulaire, sur “save” cliquez par exemple, passez simplement le formName en tant que paramètre et hey presto formulaire disponible dans save method (où formScopeObject est basé sur les spécifications ng-model que vous avez définies dans votre formulaire OU si vous êtes l’édition serait l’object stockant l’élément en cours d’édition, c’est-à-dire un compte utilisateur)

 
Name

Pour développer la réponse par user1338062: Une solution que j’ai utilisée à plusieurs resockets pour initialiser quelque chose dans mon contrôleur mais que j’ai dû attendre jusqu’à ce qu’elle soit réellement disponible:

 var myVarWatch = $scope.$watch("myVar", function(){ if(myVar){ //do whatever init you need to myVarWatch(); //make sure you call this to remove the watch } }); 

Pour ceux qui utilisent Angular 1.5, ma solution était de regarder le formulaire à l’étape $ postlink:

 $postLink() { this.$scope.$watch(() => this.$scope.form.$valid, () => { }); }