¿Cómo activar manualmente el envío de un formulario en AngularJS?

Question

Tengo un formulario que quería anidar, pero no es posible porque HTML no puede aceptar el formulario anidado. ¿Existe alguna manera de invocar manualmente el envío (desencadena la validación, por ejemplo, requerida) en el primer formulario en AngularJS?

Así es como el código es el siguiente:

<div ng-conroller="ContactController"> 

    <form ng-submit="saveHeaderAndDetail()"> 
     <label for="Description">Description</label> 
     <input type="text" ng-model="Description" required/> 

     <input type="text" style="visibility:hidden" /> 
    </form> 

    <form ng-submit="addToDetail()"> 
    ... 
    </form> 

    <input type="button" 
     ng-click="what code could trigger the first form's submit?"/> 

</div> 

Por cierto, ambas formas están bajo un controlador si eso ayuda

Answer 1

intente crear una directiva que atrapa un evento: http://jsfiddle.net/unWF3/

Answer 2

Usted puede tener formularios anidados con la directiva ng-form. Será como:

<form name="accountForm"> 
    <div data-ng-form="detailsForm"> 
    <input required name="name" data-ng-model="name"> 
    </div> 
    <div data-ng-form="contactsForm"> 
    <input required name="address" data-ng-model="address"> 
    </div> 
    <button type="submit">Save</button> 
</form> 

De esta forma cuando submit se activarán para la accountForm validará NG-formas anidadas también.

Answer 3

he respondido a una pregunta similar aquí AngularJS - How to trigger submit in a nested form

Básicamente, puede desencadenar la validación por el disparo de $validate caso

isFormValid = function($scope, ngForm) { 
    $scope.$broadcast('$validate'); 
    if(! ngForm.$invalid) { 
     return true; 
} 

Por ejemplo el código de trabajo & un pequeño método de utilidad que es útil para mostrar los mensajes de validación , mira la respuesta en el enlace de arriba.

Answer 4

Siempre podemos enviar un formulario directamente utilizando la función () de javascript.

document.getElementById("myform").submit() 

De esta manera, podemos validar el formulario utilizando AngularJS primero y si el formulario es válido entonces enviarlo utilizando el método de envío.

Answer 5

Hay una manera más fácil de hacerlo, puede dar un nombre para cada formulario que tenga en su aplicación, luego podrá enviar todo el objeto angular del formulario que desea activar o hacer lo que sea quieres con eso Ejemplo:

<div ng-conroller="ContactController"> 

    <form name="myFirstForm" ng-submit="saveHeaderAndDetail()"> 
     <label for="Description">Description</label> 
     <input type="text" ng-model="Description" required/> 

     <input type="text" style="visibility:hidden" /> 
    </form> 

    <form name="mySecondForm" ng-submit="addToDetail()"> 
    ... 
    </form> 

    <input type="button" 
     ng-click="saveHeaderAndDetail(myFirstForm)"/> 

</div> 

Luego, en su función

saveHeaderAndDetail (myFirstForm) { 
myFirstForm.$submitted = true 
... 
}