AngularJS: Llame al evento ng-submit fuera del formulario

Question

AngularJS: Llame al evento ng-submit fuera del formulario

Soy un pez en AngularJS y tengo este escenario.

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

En formas normales AngularJS proporciona la directiva ng-submit para que funcione como un atributo en la forma, pero necesito llamarlo fuera.

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

30

angularjs javascript html angularjs-directive form-submit

Author: Joseph Silber, 2013-09-03

Source

10 answers

Use el atributo 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>

46

Author: Hodes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-10 12:57:10

Esta es, con mucho, la solución más limpia que encontré, todos los créditos van a @Offereins https://stackoverflow.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.

9

Author: sbedulin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:37

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

5

Author: edqwerty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-16 11:57:41

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

<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>

2

Author: Cald,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-03 15:35:07

Todas las grandes respuestas, pero la uber-solución, con todas sus opciones establecidas: 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 @m-k's y peinando ideas de @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);
        });
     }
 };
});

2

Author: OzBob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-12 07:56:33

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

La forma más fácil para mí crear una directiva especial para el envío externo.

Importante solo use el evento correcto .triggerHandler ('submit') on form element

$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);   
              }
            })

Mira mi respuesta aquí ¿Cómo activar el envío de formularios mediante programación en AngularJS?

1

Author: non4me,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:26

Si está buscando un identificador de estado de forma enviado: En la función ng-click simplemente agregue vm.formName.$setSubmitted ();

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

1

Author: Niklavr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-10 12:59:18

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 regulares de envío de formularios: le permite tocar los botones sin demora, pero también garantiza 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-esto asegura que usted puede golpear sus controles, así como con el teclado, como con un clic en el escritorio, y un toque en dispositivos móviles(sin golpear el evento de clic dos veces).

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

0

Author: M K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-22 15:26:20

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

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

Ejemplo: émbolo

-2

Author: Jesus Rodriguez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-03 16:22:58

score 17 · Accepted Answer

Por favor, rodee su código con un controlador ng y use ng-click en botones fuera del alcance de

.

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 = '';
        }
    };
}