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

J'utilise actuellement ce qui suit.

$scope.$$childHead.customerForm[firstName], pour 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], pour 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 Foundation. Comment puis-je y accéder firstName?

EDIT : On dirait que le formn'est pas ajouté au scopequand il se trouve dans un onglet Foundation.

Quelqu'un a-t-il une solution pour cela?

Bien que mentionné dans d'autres commentaires, j'ai pensé que je le préciserais un peu pour ceux qui utilisent 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();
       }
}

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 = {};

Un modèle dans une portée enfant

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

Le problème est que le formulaire n'a pas à être défini au moment où le code dans le contrôleur est exécuté. Alors tu dois faire quelque chose comme ça

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

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 gérant la soumission. Utilisez le nom du formulaire, donc pour la question d'origine, ce serait quelque chose comme:

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

Un peu en retard pour une réponse mais est venu avec l'option suivante. Cela fonctionne pour moi mais je ne sais pas si c'est la bonne façon 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 mon formulaire dans ma variable de contrôleur qui est $scope.myForm

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

Quelque chose comme $scope.dummy = {}

Pour votre situation, cela signifierait 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()

LIEN WIKI

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

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

1.Utilisez $ parent.parentScopeProperty dans la portée enfant. Cela empêchera l'étendue 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 passant la valeur primitive au parent (pas toujours possible)

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

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

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

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

puis dans le HTML, il vous suffit de définir 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
            }
    }]);

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

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

Fondamentalement, certaines directives angulaires, telles que ng-if, ng-repeatou ng-include, créeront une portée enfant isolée. Tout comme les directives personnalisées avec unscope: {} propriété définie. Probablement, vos composants de fondation sont également sur votre chemin.

J'ai eu le même problème lors de l'introduction d'un simple ng-ifautour du <form>tag.

Consultez-les pour plus d'informations:

• https://groups.google.com/forum/#!topic/angular/B2uB8-9_Xbk

• AngularJS - perte de portée lors de l'utilisation de ng-include

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?

À quoi la réponse serait simplement: non .

ajoutez un ng-model="$ctrl.formName"attribut à votre formulaire, puis dans le contrôleur, vous pouvez accéder au formulaire en tant qu'objet à l'intérieur de votre contrôleur enthis.formName

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

dans le contrôleur:

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