堆棧內存溢出
  簡體   English   中英

AngularJS：在表單外調用ng-submit事件

[英]AngularJS: Call the ng-submit event outside the form

 原文  2013-09-02 21:54:58  5   10    javascript/ html/ angularjs/ angularjs-directive/ form-submit

問題描述

我是AngularJS的魚，我有這個場景。 

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

在正常情況下，AngularJS提供ng-submit指令作為表單中的屬性，但我需要在外面調用它。

那么，有人遇到過同樣的問題嗎？ 如果是的話，你做了什么？

10 個解決方案

解決方案1
 51  2015-02-10 12:57:10

使用HTML5的form屬性，這是一個示例： 

 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>

解決方案2
 17 已采納  2013-09-04 13:06:03

請使用ng-controller包圍您的代碼，並使用ng-單擊<form>范圍之外的按鈕。

我在jsfiddle上為你做一個樣本...試試吧：

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>

與js： 

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

解決方案3
 9  2015-06-23 09:16:55

這是迄今為止我找到的最干凈的解決方案，所有信用都歸@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>

此方法不需要任何其他控制器JS或其他jQuery調整。

解決方案4
 5  2016-05-14 12:49:25

Angular 2

對於希望使用Angular 2實現相同功能的任何人，ngForm會公開您可以使用的事件發射器。

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>

您還可以從組件ts / js文件中執行相同的發射

解決方案5
 2  2013-09-03 15:35:07

這是我的測試代碼。 已經調用了具有登錄方法的控制器！ 

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

解決方案6
 2  2015-02-12 07:56:33

所有偉大的答案，但超級解決方案，所有選項都列出： 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>

並擴展@ mk並從@ 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);
        });
     }
 };
});

解決方案7
 1  2016-06-26 12:50:22

簡短回答一下http://jsfiddle.net/84bodm5p/

對我來說最簡單的方法是為外部提交創建特殊指令。

重要的是僅在表單元素上使用權限事件.triggerHandler（'submit'） 

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

看看我在這里的答案如何在AngularJS中以編程方式觸發表單提交？

解決方案8
 1  2017-10-10 12:59:18

如果你正在尋找提交狀態的句柄：在函數ng-click中只需添加vm.formName。$ setSubmitted（）; 

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

解決方案9
 0  2013-11-22 15:26:20

有一個適合我的解決方案：

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

查看第2部分和第3部分。

里面有兩個解決方案。

一個用於常規表單提交按鈕 - 它允許您毫不拖延地點擊按鈕，但也確保在任何表單字段中按“輸入”鍵將觸發提交。

其次還有一個額外的eventHandler，它將click，tap和keydown [enter]事件組合成一個 - 這可以確保您可以通過鍵盤點擊控件，就像點擊桌面一樣，然后點擊移動設備（沒有點擊兩次點擊事件）設備。

如果你有任何問題，請給我一個評論，我會解決它。

解決方案10
 -2  2013-09-03 16:22:58

在Angular中，您不提交表單（好吧，至少以有角度的方式）。 您只需要一個能夠在完成表單時執行您想要執行的操作的功能。

只需在<button>調用該功能，即可開始使用。

示例： plunker

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 AngularJS等待提交表單（ng-submit） AngularJS-ng-submit無法在表單中工作 AngularJS - Ng-Submit 不執行函數調用 AngularJS ng-submit無法在ng-repeat表單中工作 angularjs-ng提交表單不能與動態生成的html一起使用 angularjs ng-submit不起作用 ng-submit未在angularjs中觸發 ng-submit不在angularjs中工作 ng-submit后未定義AngularJS $ scope表單屬性 ng-submit在我的AngularJS中無法正常工作
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM