angularjs - reactivos - ¿Cómo puedo verificar la validez de un formulario incluido en ng desde el ámbito principal?

validar campos con angular 2

Question

Tengo un subformulario que se comparte entre varias vistas en mi aplicación. En una vista, este subformulario se muestra solo con un botón de retroceso / continuar en la parte inferior que lleva al usuario al siguiente subformulario. En otra vista, el subformulario se muestra en la misma página que otros subformularios (básicamente un formulario largo).

Dado que el html del subformulario es 100% idéntico en ambas vistas, lo separé en un parcial y estoy usando ng-include para representarlo. En la vista que muestra solo el subformulario con los botones Atrás / Continuar, represento los botones Atrás / Continuar dentro del HTML del padre.

Visualmente, todo funciona bien y puedo acceder a todos los datos ingresados ​​en el formulario ( user.email, user.password, user.etc... ).

El problema es que estoy habilitando / deshabilitando el botón "continuar" en función de si el usuario ha completado o no el formulario correctamente, y esto no funciona en la variación de "solo subformulario" porque el alcance principal no parece Poder acceder al estado del formulario. Si pego los botones en el parcial, funciona, pero no quiero hacerlo porque los botones no pertenecen allí en todos los casos en que se está utilizando este parcial.

Ejemplo de JSFiddle

Observe en mi ejemplo que el botón de enviar dentro del borde rojo está deshabilitado hasta que se escriba algo en el cuadro y el "¿Formulario no válido?" el valor se actualiza, mientras que el botón dentro del borde azul siempre está habilitado y el "¿Formulario no válido?" el valor está en blanco.

¿Cómo puedo acceder al valor de myForm.$invalid desde el ámbito principal?

Answer 1

El ámbito secundario creado cuando utiliza ng-include oculta las funciones del formulario del elemento principal.

Además de usar una directiva, también puede agregar un objeto en el elemento primario, pero es importante establecer el nombre del formulario en un objeto con una propiedad como esta:

<form name="myFormHolder.myForm">

y en el controlador padre

$scope.myFormHolder = {};

entonces lo siguiente debería funcionar:

$scope.myFormHolder.myForm.$pristine

De esta manera, cuando se evalúa el formulario, myForm. $ Valid se establecerá en el padre. Creo que hice esta misma pregunta: ¿Por qué formar indefinido dentro de ng-include al verificar $ pristine o $ setDirty ()?

Answer 2

Si se trata de un formulario secundario, puede mover la etiqueta de formulario desde el formulario secundario hasta el formulario principal: JSFiddle actualizado

También puede anidar sus formularios utilizando la ngForm-directive :

En formas angulares se pueden anidar. Esto significa que la forma externa es válida cuando todas las formas secundarias también son válidas. Sin embargo, los navegadores no permiten el anidamiento de elementos, por esta razón angular proporciona un alias ngForm que se comporta de forma idéntica pero permite el anidamiento de formularios.

El resultado es un poco desordenado imo. Prefiero crear una directiva ''myForm'' con un nuevo alcance para evitar usar $ parent, algo como:

myApp.directive(''myForm'',function(){
    return{ 
        restrict:''E'',
        scope:{model:''=''},
        templateUrl:''/form.html'',
        replace:true
    }
});

- ver este ejemplo de JSFiddle