带有多个按钮的角绑定表单提交答案

【问题标题】：angular- bind form submit with multiple buttons带有多个按钮的角绑定表单提交
【发布时间】：2016-01-20 15:14:12
【问题描述】：

我有一个带有多个提交按钮的表单：

<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 指令）。上面的代码不起作用。这样做的正确方法是什么？这可能吗？

【问题讨论】：

标签： angularjs forms angularjs-ng-click angularjs-forms

【解决方案1】：

我建议您使用一种更简单的方法。只需检查您的表单在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 看起来重复代码的次数。而不是您可以在控制器范围内使用一种方法来验证表单并调用所需的方法来提交表单。

标记

<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 改为button submit

更新

要使其通用，您需要将其放在每个按钮上，而不是将指令放在 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()
          }
        });
      });
    }
  };
});

Plunkr

【讨论】：

Willblook at it..to make it more generic way

【解决方案2】：

解决方案是将指令放在提交按钮上，并使用指令'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();
                    }
                });
            }
        };
    });

【讨论】：