Posso acessar um formulário no controlador?

Atualmente, estou usando o seguinte.

$scope.$$childHead.customerForm[firstName], de modo a:

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

Mas isso só funciona no Chrome. Agora eu tentei o seguinte:

$scope.editCustomerForm[firstName], de modo a:

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

O que não funciona. Observe que meu formulário está dentro de uma guia Foundation. Como posso acessar firstName?

EDIT : Parece que formnão é adicionado ao scopequando está dentro de uma guia Foundation.

Alguém tem uma solução para isso?

Embora aludido em outros comentários, pensei em explicar um pouco para aqueles que usam a sintaxe "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>

Então você pode acessar o FormController no seu código como:

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

    function saveChanges() {

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

Você pode anexar o formulário a algum objeto definido em um controlador pai. Em seguida, você pode acessar seu formulário mesmo no escopo filho.

Controlador pai

$scope.forms = {};

Algum modelo em um escopo filho

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

O problema é que o formulário não precisa ser definido no momento em que o código no controlador é executado. Então você tem que fazer algo assim

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

Se você deseja passar o formulário para o controlador para fins de validação, basta passá-lo como argumento ao método que manipula o envio. Use o nome do formulário, portanto, para a pergunta original, seria algo como:

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

Um pouco atrasado para uma resposta, mas veio com a seguinte opção. Está funcionando para mim, mas não tenho certeza se é a maneira correta ou não.

Na minha opinião, estou fazendo o seguinte:

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

E no controlador:

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

Agora, depois de fazer isso, tenho meu formulário na minha variável de controlador, que é $scope.myForm

Para poder acessar o formulário no seu controlador, você deve adicioná-lo a um objeto de escopo fictício.

Algo como $scope.dummy = {}

Para sua situação, isso significaria algo como:

<form name="dummy.customerForm">

No seu controlador, você poderá acessar o formulário:

$scope.dummy.customerForm

e você poderá fazer coisas como

$scope.dummy.customerForm.$setPristine()

WIKI LINK

Tendo uma '.' nos seus modelos garantirá que a herança prototípica esteja em jogo. Então, use <input type="text" ng-model="someObj.prop1">ao invés de<input type="text" ng-model="prop1">

Se você realmente deseja / precisa usar uma primitiva, existem duas soluções alternativas:

1. Use $ parent.parentScopeProperty no escopo filho. Isso impedirá que o escopo filho crie sua própria propriedade. 2. Defina uma função no escopo pai e chame-a do filho, passando o valor primitivo para o pai (nem sempre possível)

Esta resposta está um pouco atrasada, mas me deparei com uma solução que facilita muito as coisas.

Você pode realmente atribuir o nome do formulário diretamente ao seu controlador se estiver usando a sintaxe controllerAs e, em seguida, referenciá-lo da sua variável "this". Aqui está como eu fiz isso no meu código:

Eu configurei o controlador via ui-router (mas você pode fazê-lo da maneira que quiser, mesmo no HTML diretamente com algo assim <div ng-controller="someController as myCtrl">) É assim que pode parecer em uma configuração de ui-router:

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

e, em seguida, no HTML, basta definir o nome do formulário como "controllerAs". "name" da seguinte forma:

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

Agora, dentro do seu controlador, você pode simplesmente fazer isso:

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

Sim, você pode acessar um formulário no controlador (conforme indicado nos documentos ).

Exceto quando seu formulário não estiver definido no escopo do controlador e é definido em um escopo filho.

Basicamente, algumas diretivas angulares, como ng-if, ng-repeatou ng-include, criarão um escopo filho isolado. Quaisquer diretivas personalizadas com umscope: {} propriedade definida. Provavelmente, os componentes da sua fundação também estão no seu caminho.

Eu tive o mesmo problema ao introduzir um simples em ng-iftorno do<form> tag.

Veja estes para mais informações:

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

• AngularJS - perdendo escopo ao usar ng-include

Nota: sugiro que você reescreva sua pergunta. A resposta para sua pergunta é sim, mas seu problema é um pouco diferente:

Posso acessar um formulário em um escopo filho do controlador?

Para o qual a resposta seria simplesmente: não .

adicione ng-model="$ctrl.formName"atributo ao seu formulário e, no controlador, você pode acessar o formulário como um objeto dentro do seu controlador,this.formName

Definitivamente você não pode acessar o formulário no escopo bec. não é criado. O DOM do modelo html é carregado lentamente como o construtor do controlador. a solução é assistir até que o DOM seja carregado e todo o escopo definido!

no controlador:

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