javascript - setdirty - AngularJS: llame al evento ng-submit fuera del formulario

formcontrol angular js

Question

Soy un pez en AngularJS y tengo este escenario.

<form>
    <input type="text">
</form>
<button type="submit">submit</button>

De manera normal, AngularJS proporciona la directiva ng-submit para que funcione como un atributo en el formulario pero necesito llamarlo desde afuera.

Entonces, ¿alguien ha experimentado el mismo problema? Si es así, ¿qué hiciste?

Answer 1

Aquí está mi código de prueba. El controlador que tiene el método de inicio de sesión ya está llamado!

<form ng-submit="login()" id="form-test" name="formTest">
    <input type="text" name="username">
    <br>
    <input type="password" name="userpass">
    <br>

    <!-- works -->
    <input type="submit" value="submit inside" id="test">
</form>

<!-- change the path from /#/login to /?username=aaa&userpass=aaa#/login and reloads the page-->
<button type="submit" onclick="$(''#form-test'').submit();">submit outside (jquery)</button> 

<!-- doesn''t work -->
<button type="submit" ng-click="formTest.submit()">submit outside (ng-click)</button> 

Answer 2

En Angular no envías formularios (bueno, al menos de forma angular). Solo necesita una función que hará lo que quiere hacer cuando complete el formulario.

Simplemente llame a esa función en su <button> y estará listo para comenzar.

Ejemplo: plunker

Answer 3

Esta es, con diferencia, la solución más limpia que he encontrado, todos los créditos van a @Offereins https://.com/a/23456905/3819736

<form ng-submit="vm.submit()">
    <input type="text" name="name" />
    <input type="submit" id="submit-form" class="hidden" />
</form>
<label for="submit-form">
    <button type="submit">submit</button>
</label>

Este método no requiere ningún controlador adicional JS u otros ajustes de jQuery.

Answer 4

Hay una solución que funciona para mí:

http://jsbin.com/ODaFaGU/3/edit

Echa un vistazo a la PARTE 2 y la PARTE 3.

Hay dos soluciones dentro.

Uno para los botones de envío de formulario normal: le permite tocar los botones sin demora, pero también asegura que al presionar la tecla "enter" en cualquiera de los campos del formulario se activará un envío.

En segundo lugar, hay un EventHandler adicional que combina los eventos click, tap y keydown [enter] en uno solo, lo que garantiza que pueda golpear sus controles también con el teclado, como con un clic en el escritorio y un toque en el móvil ( sin golpear el evento clic dos veces) dispositivos.

Si tienes algún problema con esto, dame un comentario, lo arreglaré.

Answer 5

Respuesta corta: http://jsfiddle.net/84bodm5p/

La forma más fácil para mí de crear una directiva especial para envíos externos.

Importante solo use el evento correcto .triggerHandler (''submit'') en el elemento de formulario

$scope.$on(''makeSubmit'', function(event, data){
              if(data.formName === $attr.name) {
                $timeout(function() {
                  $el.triggerHandler(''submit''); //<<< This is Important

                  //equivalent with native event
                  //$el[0].dispatchEvent(new Event(''submit'')) 
                }, 0, false);   
              }
            })

Mire mi respuesta aquí ¿Cómo activar el envío del formulario mediante programación en AngularJS?

Answer 6

Rodee su código con un controlador ng y use ng-click en los botones fuera del alcance de <form>.

Hago una muestra en jsfiddle para ti ... pruébalo:

http://jsfiddle.net/xKkvj/2/

<div ng-app>
    <div ng-controller="Ctrl">
        <form ng-submit="submit()">Enter text and hit enter:
            <input type="text" ng-model="text" name="text" />
            <input type="submit" id="submit" value="Submit" /> <pre>list={{list}}</pre>
        </form>
        <button ng-click="submit()">Submit 2</button>
    </div>
</div>

con js:

function Ctrl($scope) {
    $scope.list = [];
    $scope.text = ''hello'';
    $scope.submit = function () {
        if ($scope.text) {
            $scope.list.push($scope.text);
            $scope.text = '''';
        }
    };
}

Answer 7

Si está buscando un controlador de estado de formulario enviado: En la función ng-click, simplemente agregue vm.formName. $ SetSubmitted ();

ng-click="vm.formName.$setSubmitted(); vm.submit()"

Answer 8

Todas las grandes respuestas, pero la solución de uber, con todas sus opciones presentadas: http://plnkr.co/edit/VWH1gVXjP2W9T9esnVZP?p=preview

  <form ng-submit="submit()" name="jForm" id="jForm" onsubmit="event.returnValue = false; return false;">
    <input type="text" class="form-control" placeholder="try to hit the enter key in here" />
    <div class="btn btn-default" id="tap">
      Tap me
    </div>

    <div ui-submit="" class="btn btn-primary">Submit form</div>
  </form>
  <ui-submitform class="btn btn-primary" formsubmitfunction="submit()">Submit form 2</ui-submitform>
  <button onclick="$(''#jForm'').submit()">jquery Submit</button>

y extendiendo las ideas de @mk y peinando desde @ joaozito-polo:

app.directive(''uiSubmitform'', function()
{
    // need this to make sure that you can submit your form by simply pressing the enter key in one of the input fields
    return {
     restrict: ''E'',
     link: function(scope, element, attrs)
     {
        element.onTrigger(function()
        {
          //scope.$apply(attrs.formsubmitfunction); 
            scope.$eval(attrs.formsubmitfunction);
        });
     }
 };
});

Answer 9

Use el atributo de form de HTML5, aquí hay una muestra:

angular.module(''app'', [])

.controller(''MyCtrl'', [''$scope'', function($scope) {
  $scope.submitted = false;
  
  $scope.confirm = function() {
    $scope.submitted = true;
  };
}]);

form {
  padding:5px;
  border: 1px solid black
}

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
  
  <form id="myform" ng-submit="confirm()">
    <label for="myinput">My Input</label>
    <input type="text" id="myinput" name="myinput">
  </form>
  <br>
  
  <input type="submit" value="Submit" form="myform">
  
  <p ng-show="submitted">
    The form was submitted
  </p>

</body>
</html>

Answer 10

Angular 2

Para cualquiera que busque lograr lo mismo con Angular 2, ngForm expone un emisor de eventos que puede usar.

https://angular.io/api/forms/NgForm

<form role="form" (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
    <label for="name">Name</label>
    <input autofocus type="text" ngControl="name" #name="ngForm" class="form-control" id="name" placeholder="Name">
    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
        Name is required
    </div>
</div>
</form>
<button type="submit" class="btn btn-primary" (click)="myForm.ngSubmit.emit()">Add</button>

También puede realizar la misma emisión desde el interior del archivo ts / js de su componente