web-dev-qa-db-fra.com

Puis-je accéder à un formulaire dans le contrôleur?

J'utilise actuellement le suivant.

$scope.$$childHead.customerForm[firstName], de sorte que:

<form name="customerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" 
         tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

Mais cela ne fonctionne que dans Chrome. Maintenant, j'ai essayé ce qui suit:

$scope.editCustomerForm[firstName], de sorte que:

<form name="customerForm" ng-model="editCustomerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

Ce qui ne marche pas Notez que mon formulaire se trouve dans un onglet Fondation. Comment puis-je accéder à firstName?

EDIT: Il semble que la form ne soit pas ajoutée à la scope lorsqu'elle se trouve dans un onglet Fondation.

Quelqu'un a une solution pour cela?

angularjsangular-foundationangularjs-forms
148
Vincent

Bien que mentionné dans d'autres commentaires, je pensais l'écrire un peu pour ceux qui utilisaient la syntaxe "Controller As":

<div ng-controller="MyController as ctrl">

<form name="ctrl.myForm">
    ...inputs
    Dirty? {{ctrl.myForm.$dirty}}

    <button ng-click="ctrl.saveChanges()">Save</button>
</form>

</div>

Ensuite, vous pouvez accéder au FormController dans votre code comme:

function MyController () {
    var vm = this;
    vm.saveChanges = saveChanges;

    function saveChanges() {

       if(vm.myForm.$valid) { 
            // Save to db or whatever.
            vm.myForm.$setPristine();
       }
}
205
slopapa

Vous pouvez attacher le formulaire à un objet défini dans un contrôleur parent. Ensuite, vous pouvez accéder à votre formulaire même à partir d'une portée enfant.

contrôleur parent

$scope.forms = {};

Certains modèles dans une portée enfant

<form name="forms.form1">
</form>

Le problème est que le formulaire n'a pas besoin d'être défini au moment de l'exécution du code dans le contrôleur. Donc, vous devez faire quelque chose comme ça

$scope.$watch('forms.form1', function(form) {
  if(form) {
    // your code...
  }
});
90
ondrs

Si vous souhaitez transmettre le formulaire au contrôleur à des fins de validation, vous pouvez simplement le transmettre en tant qu'argument à la méthode qui gère la soumission. Utilisez le nom du formulaire, donc pour la question initiale, cela ressemblerait à quelque chose comme:

<button ng-click="submit(customerForm)">Save</button>
88
Anthony Shull

Un peu en retard pour une réponse mais est venu avec l'option suivante. Cela fonctionne pour moi mais je ne suis pas sûr que ce soit correct ou non.

À mon avis, je fais ceci:

<form name="formName">
    <div ng-init="setForm(formName);"></div>
</form>

Et dans le contrôleur:

$scope.setForm = function (form) {
    $scope.myForm = form;
}

Maintenant, après avoir fait cela, j'ai ma forme dans la variable de contrôleur qui est $scope.myForm

74
Atul Chaudhary

Pour pouvoir accéder au formulaire dans votre contrôleur, vous devez l'ajouter à un objet de champ factice.

Quelque chose comme $scope.dummy = {}

Pour votre situation, cela voudrait dire quelque chose comme:

<form name="dummy.customerForm">

Dans votre contrôleur, vous pourrez accéder au formulaire en:

$scope.dummy.customerForm

et vous pourrez faire des choses comme

$scope.dummy.customerForm.$setPristine()

WIKI LINK

Avoir un '.' dans vos modèles garantira que l’héritage prototype est en jeu. Donc, utilisez <input type="text" ng-model="someObj.prop1"> plutôt que <input type="text" ng-model="prop1">

Si vous voulez vraiment/devez utiliser une primitive, il existe deux solutions:

1.Utilisez $ parent.parentScopeProperty dans la portée de l'enfant. Cela empêchera la portée enfant de créer sa propre propriété. 2.Définissez une fonction sur la portée parent et appelez-la à partir de l'enfant en transmettant la valeur primitive au parent (pas toujours possible).

22
Carsten

Cette réponse est un peu en retard, mais je suis tombé sur une solution qui rend tout beaucoup plus facile.

En fait, vous pouvez attribuer le nom du formulaire directement à votre contrôleur si vous utilisez la syntaxe controllerAs puis faites référence à celui-ci à partir de votre variable "this". Voici comment je l'ai fait dans mon code:

J'ai configuré le contrôleur via le routeur ui (mais vous pouvez le faire comme vous le souhaitez, même dans le code HTML directement avec quelque chose comme <div ng-controller="someController as myCtrl">). Voici à quoi cela pourrait ressembler dans une configuration de routeur ui:

views: {
            "": {
                templateUrl: "someTemplate.html",
                controller: "someController",
                controllerAs: "myCtrl"
            }
       }

puis dans le code HTML, vous définissez simplement le nom du formulaire comme "controllerAs". "name" comme ceci:

<ng-form name="myCtrl.someForm">
    <!-- example form code here -->
    <input name="firstName" ng-model="myCtrl.user.firstName" required>
</ng-form>

maintenant, dans votre contrôleur, vous pouvez très simplement faire ceci:

angular
.module("something")
.controller("someController",
    [
       "$scope",
        function ($scope) {
            var vm = this;
            if(vm.someForm.$valid){
              // do something
            }
    }]);
22
FrankieAvocado

Oui, vous pouvez accéder à un formulaire dans le contrôleur (comme indiqué dans le docs ).

Sauf si votre formulaire n'est pas défini dans la portée du contrôleur et est défini à la place dans une portée enfant.

Fondamentalement, certaines directives angular, telles que ng-if, ng-repeat ou ng-include, créeront une portée enfant isolée. Ainsi, toutes les directives personnalisées avec une propriété scope: {} seront définies. Probablement, vos composants de base sont également sur votre chemin.

J'ai eu le même problème en introduisant un simple ng-if autour de la balise <form>.

Voir ces pour plus d'informations:

Remarque: Je vous suggère de réécrire votre question. La réponse à votre question est oui mais votre problème est légèrement différent:

Puis-je accéder à un formulaire dans une étendue enfant à partir du contrôleur?

A quoi la réponse serait simplement: no .

6
Andre Torgal

ajoutez l'attribut ng-model="$ctrl.formName" à votre formulaire, puis dans le contrôleur, vous pourrez accéder au formulaire sous forme d'objet à l'intérieur de votre contrôleur par this.formName

3
Dhurim Kelmendi

Vous ne pouvez certainement pas accéder au formulaire dans la portée bec. ce n'est pas créé. Le modèle DOM from html est chargé un peu lentement comme le constructeur du contrôleur. la solution est de regarder jusqu'à ce que DOM soit chargé et que toute l'étendue soit définie!

dans le contrôleur:

$timeout(function(){
    console.log('customerForm:', $scope.customerForm);
    // everything else what you need
});
0
Victor Orletchi