web-dev-qa-db-fra.com

AngularJS: appelez l'événement ng-submit en dehors du formulaire

Je suis un poisson dans AngularJS et j'ai ce scénario.

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

De manière normale, AngularJS fournit la directive ng-submit pour fonctionner comme attribut dans le formulaire, mais je dois l'appeler à l'extérieur.

Alors, quelqu'un a rencontré le même problème? Si oui, qu'avez-vous fait?

javascripthtmlangularjsangularjs-directiveform-submit
31
Cald

Veuillez entourer votre code d'un ng-controller et utiliser ng-click sur des boutons hors de portée de <form>.

Je fais un échantillon sur jsfiddle pour vous ... essayez-le:

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>

avec js:

function Ctrl($scope) {
    $scope.list = [];
    $scope.text = 'hello';
    $scope.submit = function () {
        if ($scope.text) {
            $scope.list.Push($scope.text);
            $scope.text = '';
        }
    };
}
17
Joao Polo

Utilisez l'attribut form de HTML5, voici un exemple:

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

C'est de loin la solution la plus propre que j'ai trouvée, tous les crédits vont à @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>

Cette méthode ne nécessite aucun contrôleur JS supplémentaire ou d'autres réglages jQuery.

9
sbedulin

Angulaire 2

Pour tous ceux qui cherchent à obtenir le même résultat avec Angular 2, ngForm expose un émetteur d'événements que vous pouvez utiliser.

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>

Vous pouvez également effectuer la même émission depuis l'intérieur de votre fichier ts/js de composant

5
edqwerty

Voici mon code de test. Le contrôleur qui a la méthode de connexion est déjà appelé!

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

Toutes les bonnes réponses, mais la solution uber, avec toutes vos options présentées: 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>

et étendre les @ m-k et combiner les idées 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
OzBob

Réponse courte Regardez http://jsfiddle.net/84bodm5p/

Le moyen le plus simple pour moi de créer une directive spéciale pour la soumission externe.

Important: utilisez uniquement le bon événement .triggerHandler ('submit') sur l'élément de formulaire

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

Regardez ma réponse ici Comment déclencher l'envoi de formulaire par programmation dans AngularJS?

1
non4me

Si vous cherchez un descripteur de l'état de forme soumis: Dans la fonction ng-cliquez simplement ajoutez vm.formName. $ SetSubmitted ();

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

Il existe une solution qui fonctionne pour moi:

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

Consultez la PARTIE 2 et la PARTIE 3.

Il y a deux solutions à l'intérieur.

Un pour les boutons de soumission de formulaire standard - il vous permet d'appuyer sur les boutons sans délai, mais garantit également qu'en appuyant sur la touche "Entrée" dans l'un des champs du formulaire déclenchera une soumission.

Deuxièmement, il existe un gestionnaire d'événements supplémentaire qui combine les événements de clic, de toucher et de frappe [entrée] en un seul - cela garantit que vous pouvez appuyer sur vos contrôles aussi bien avec le clavier, comme avec un clic sur le bureau et un toucher sur le mobile ( sans frapper deux fois l'événement click).

Si vous avez des problèmes avec cela, donnez-moi un commentaire, je le corrigerai.

0
M K