angularjs - reactivos - ¿Puedo acceder a un formulario en el controlador?

validar formulario angular 5

Question

Actualmente estoy usando lo siguiente.

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

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

Pero esto solo funciona en Chrome. Ahora probé lo siguiente:

$scope.editCustomerForm[firstName] , de modo 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>

Lo cual no funciona. Tenga en cuenta que mi formulario está dentro de una pestaña Foundation. ¿Cómo puedo acceder a firstName ?

EDITAR : parece que el form no se agrega al scope cuando está dentro de una pestaña de Fundación.

Alguien tiene una solución para esto?

Answer 1

Aunque aludí en otros comentarios, pensé que podría deletrearlo un poco para aquellos que usan la sintaxis "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>

Luego puede acceder al FormController en su 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();
       }
}

Answer 2

Definitivamente no puedes acceder al formulario en el alcance bec. no es creado. El DOM de la plantilla html se carga un poco lentamente como el constructor del controlador. la solución es observar hasta que DOM esté cargado y todo el alcance definido.

en el controlador:

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

Answer 3

Esta respuesta es un poco tarde, pero me encontré con una solución que hace que todo sea mucho más fácil.

En realidad, puede asignar el nombre del formulario directamente a su controlador si está usando la sintaxis del controlador como referencia y luego hacer referencia a ella desde su variable "this". Así es como lo hice en mi código:

Configuré el controlador a través de ui-enrutador (pero puedes hacerlo como quieras, incluso en el código HTML directamente con algo como <div ng-controller="someController as myCtrl"> ) Esto es lo que podría parecer en un ui-router configuración del enrutador:

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

y luego en el HTML, simplemente establece el nombre del formulario como "controllerAs". "name", así:

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

ahora dentro de tu controlador puedes simplemente hacer esto:

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

Answer 4

Para poder acceder al formulario en su controlador, debe agregarlo a un objeto de ámbito ficticio.

Algo como $scope.dummy = {}

Para su situación, esto significaría algo así como:

<form name="dummy.customerForm">

En su controlador, podrá acceder al formulario de la siguiente manera:

$scope.dummy.customerForm

y podrás hacer cosas como

$scope.dummy.customerForm.$setPristine()

WIKI LINK

Teniendo un ''.'' en sus modelos se asegurará de que la herencia prototípica esté en juego. Por lo tanto, utilice <input type="text" ng-model="someObj.prop1"> lugar de <input type="text" ng-model="prop1">

Si realmente quiere / necesita usar una primitiva, existen dos soluciones:

1.Utilice $ parent.parentScopeProperty en el ámbito secundario. Esto evitará que el ámbito hijo cree su propia propiedad. 2.Defina una función en el ámbito principal y llámelo desde el elemento secundario, pasando el valor primitivo hasta el elemento principal (no siempre es posible)

Answer 5

Puede adjuntar el formulario a algún objeto que esté definido en un controlador principal. Luego puede llegar a su formulario incluso desde un alcance infantil.

Controlador principal

$scope.forms = {};

Alguna plantilla en un alcance de niño

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

El problema es que el formulario no tiene que definirse en el momento en que se ejecuta el código en el controlador. Entonces tienes que hacer algo como esto

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

Answer 6

Sí, puede acceder a un formulario en el controlador (como se indica en los docs ).

Excepto cuando su formulario no está definido en el ámbito del controlador y se define en un ámbito hijo en su lugar.

Básicamente, algunas directivas angulares, como ng-if , ng-repeat o ng-include , crearán un alcance hijo aislado. Lo mismo ocurrirá con cualquier directiva personalizada con un scope: {} propiedad definida. Probablemente, los componentes de su fundación también están en su camino.

Tuve el mismo problema cuando introduje un simple ng-if alrededor de la etiqueta <form> .

Véalos para más información:

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

• AngularJS: perder alcance al usar ng-include

Nota: le sugiero que vuelva a escribir su pregunta. La respuesta a su pregunta es sí, pero su problema es ligeramente diferente:

¿Puedo acceder a un formulario en un ámbito secundario desde el controlador?

A lo que la respuesta sería simplemente: no .

Answer 7

Sí, puede acceder desde el controlador a través de this.formname.

Answer 8

Si desea pasar el formulario al controlador para fines de validación, simplemente puede pasarlo como argumento al método que maneja el envío. Use el nombre del formulario, por lo que para la pregunta original sería algo así como:

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

Answer 9

Un poco tarde para una respuesta, pero vino con la siguiente opción. Me funciona, pero no estoy seguro de si es la forma correcta o no.

En mi opinión, estoy haciendo esto:

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

Y en el controlador:

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

Ahora, después de hacer esto, tengo mi formulario en mi variable controladora, que es $scope.myForm

Answer 10

agregue el atributo ng-model="$ctrl.formName" a su formulario, y luego en el controlador puede acceder al formulario como un objeto dentro de su controlador mediante this.formName