1

複数の送信ボタンがあるフォームがあります。

<form name="myForm" customSubmit>
    <input type="text" ng-minlength="2">

    <button type="submit" ng-click="foo1()"></button>
    <button type="submit" ng-click="foo2()"></button>
</form>

およびディレクティブ: 

angular.module('customSubmit', [])
    .directive('customSubmit', function() {

    return {
        require: '^form',
        scope: {
            submit: '&'
        },
        link: function(scope, element, attrs, form) {
            element.on('submit', function() {
                scope.$apply(function() {
                    form.$submitted = true;
                    if (form.$valid) {
                        return scope.submit();
                    }
                });
            });
        }
    };
});

私の目標は、複数の送信ボタンを使用して、有効な場合にのみフォームを送信することです (つまり、フォームで ng-submit ディレクティブを使用できません)。上記のコードは機能しません。それを行う正しい方法は何ですか？それは可能ですか？

4

2 に答える 2

3

より簡単な方法のいずれかを使用することをお勧めします。フォームが有効かどうかを確認し、有効な場合はフォームng-clickから目的のメソッドを呼び出します。

マークアップ

<form name="myForm" customSubmit>
    <input type="text" ng-minlength="2">
    <button type="button" ng-click="myForm.$valid && foo1()"></button>
    <button type="button" ng-click="myForm.$valid && foo2()"></button>
</form>

しかし、クリックごとにチェックするmyForm.$validと、コードが何度も繰り返されるように見えます。それよりも、フォームを検証し、フォームを送信するために必要なメソッドを呼び出すコントローラースコープに1つのメソッドを含めることができます。

マークアップ

<form name="myForm" customSubmit>
    <input type="text" ng-minlength="2">
    <button type="button" ng-click="submit('foo1')"></button>
    <button type="button" ng-click="submit('foo2')"></button>
</form>

コード

$scope.submit = function(methodName){
    if($scope.myForm.$valid){
        $scope[methodName]();
    }
}

どちらの場合でも、代わりにbutton入力することができますbuttonsubmit

アップデート

form汎用的にするには、一度ディレクティブを配置するのではなく、各ボタンに配置する必要があります。

HTML

<form name="myForm">
  <input type="text" name="test" ng-minlength="2" ng-model="test">
  <button custom-submit type="submit" fire="foo1()">foo1</button>
  <button custom-submit type="submit" fire="foo2()">foo2</button>
</form>

コード

angular.module("app", [])
.controller('Ctrl', Ctrl)
.directive('customSubmit', function() {

  return {
    require: '^form',
    scope: {
      fire: '&'
    },
    link: function(scope, element, attrs, form) {
      element.on('click', function(e) {
        scope.$apply(function() {
          form.$submitted = true;
          if (form.$valid) {
            scope.fire()
          }
        });
      });
    }
  };
});

プランカー

于 2015-10-21T15:23:01.573 に答える
0

解決策は、送信ボタンにディレクティブを配置し、ディレクティブ「require」を使用することでした:

<form>
   <button my-form-submit="foo()"></button>
</form>

angular.module('myFormSubmit', [])
    .directive('myFormSubmit', function() {
        return {
            require: '^form',
            scope: {
                callback: '&myFormSubmit'
            },
            link: function(scope, element, attrs, form) {
                element.bind('click', function (e) {
                    if (form.$valid) {
                        scope.callback();
                    }
                });
            }
        };
    });
于 2015-10-22T13:51:19.300 に答える