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


Je suis un poisson à 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 en tant qu'attribut dans le formulaire, mais je dois l'appeler en dehors.

Donc, quelqu'un a rencontré le même problème? Si oui, qu'est-ce que tu as fait?


30
2017-09-02 21:54


origine


Réponses:


Entourez votre code avec un ng-controller et utilisez ng-click sur des boutons hors de la portée de <form>.

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

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
2017-09-04 13:06



Utilisez HTML5 form attribut, 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>


46
2018-02-10 12:57



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 supplémentaire JS ni aucun autre réglage jQuery.


9
2018-06-23 09:16



Angulaire 2

Pour ceux qui cherchent à obtenir la même chose 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 à partir du fichier ts / js de votre composant.


4
2018-05-14 12:49



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
2017-09-03 15:35



Toutes les bonnes réponses, mais la solution ultime, avec toutes vos options définies: 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 @ 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
2018-02-12 07:56



Réponse courte 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 la soumission de formulaires par programme dans AngularJS?


1
2018-06-26 12:50



Si vous recherchez un descripteur d'état de formulaire soumis: Dans la fonction ng-click, ajoutez simplement vm.formName. $ SetSubmitted ();

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

1
2017-10-10 12:59