web-dev-qa-db-ja.com

AngularJS：フォーム外でng-submitイベントを呼び出します

私はAngularJSの魚であり、このシナリオがあります。

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

通常の方法では、AngularJSはng-submitディレクティブを提供してフォームの属性として機能しますが、外部で呼び出す必要があります。

だから、誰かが同じ問題を経験していますか？はいの場合、何をしましたか？

javascripthtmlangularjsangularjs-directiveform-submit
31
Cald

コードをng-controllerで囲み、<form>の範囲外のボタンでng-clickを使用してください。

私はあなたのために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 = '';
        }
    };
}
17
Joao Polo

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

これは私が見つけた最もクリーンなソリューションです、すべてのクレジットは@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調整を必要としません。

9
sbedulin

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
edqwerty

これが私のテストコードです。ログインメソッドを持つコントローラーはすでに呼び出されています！

<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

すべての素晴らしい答えですが、すべてのオプションがレイアウトされたuber-solution： 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>

@ m-kの拡張と@ 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

短い答え 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でプログラムでフォーム送信をトリガーする方法？

1
non4me

送信されたフォームの状態のハンドルを探している場合：関数ngでクリックするだけで、vm.formName。$ setSubmitted（）;を追加します。

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

私のために働く解決策があります：

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

パート2とパート3をご覧ください。

内部には2つのソリューションがあります。

通常のフォーム送信ボタン用-遅延なしにボタンをタップすることができますが、フォームフィールドのいずれかで「Enter」キーを押すと送信がトリガーされます。

次に、クリック、タップ、およびキーダウン[入力]イベントを単一のイベントに結合する追加のeventHandlerがあります。これにより、デスクトップのクリックやモバイルのタップのように、キーボードでもコントロールをヒットできます（クリックイベントを2回押すことなく）デバイス。

これに関して何か問題がある場合は、私にコメントをください、私はそれを修正します。

0
M K