如何使用 Angular JS 处理表单中的多个提交按钮？

Question

我正在使用 AngularJS，并且我有一个用户可以输入数据的表单。在表单的末尾，我想要两个按钮，一个是“保存”，它将保存并转到另一个页面，另一个按钮标记为“保存并添加另一个”，它将保存表单然后重置它 - 允许他们输入另一个条目。

我如何以角度实现这一点？我在想我可以有两个带有 ng-click 标签的提交按钮，但我在表单元素上使用了 ng-submit。我有什么理由需要使用 ng-submit - 我不记得为什么我开始使用它而不是 ng-click 按钮。

代码看起来像：

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button type="submit">Save and Add Another</button>
    </form>
</div>

在控制器中SomeController

$scope.record = {};
$scope.save = function (record) {
    $http.post('/api/save', record).
        success(function(data) {
            // take action based off which submit button pressed
        });
}

Answer 1

如果有人在寻找一种简单的方法，那么只需创建一个标志并在按钮和提交之间切换。

<button type="{{isButton == true ? 'button' : 'submit'}}" >Save</button>
<button type="{{!isButton == true ? 'button' : 'submit'}}" >Update</button>

需要根据用户操作处理标志。

Answer 2

从“form”元素中移除 ng-submit 并在每个按钮上分别定义 ng-click 函数，类型为 'submit'。对于失效检查，在 form 元素标签中定义 name 属性。并检查范围函数中的验证。

<div ng-controller="SomeController">
<form name="saveForm">
    <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
    <button type="submit" ng-click="save(record)">Save</button>
    <button type="submit" ng-click="saveOther(record)">Save and Add Another</button>
</form>

作用域功能：

$scope.record = {};

$scope.save = function (record) {    

if(this.saveForm.$valid)
  {

    $http.post('/api/save', record).
    success(function(data) {
        // take action based off which submit button pressed
    });
  }
}

Answer 3

将它们全部设为按钮和type=submit。它使它更干净一点，而不是混合和匹配输入和按钮。所以基本上你试图在你的控制器中执行一种方法来处理任一按钮点击。

<div ng-controller="SomeController as sc">
        <form ng-submit="sc.execute(record)">
            <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
            <button type="submit" ng-model="sc.saveButtonVal" ng-click="sc.saveButtonVal=true>Save</button>
            <button type="submit" ng-model="sc.saveAndAddButtonVal" ng-click="sc.saveAndAddButtonVal=true">Save and Add Another</button>
        </form>
</div>

所以，在你的 js 文件中你会有这样的东西。

function SomeController() {
        var sc = this;

        sc.execute = function(record) {
            //initialize the vars
            sc.saveButtonVal = false;
            sc.saveAndAddButtonVal = false;

            sc.resetButtonValues = function() {
                sc.saveButtonVal = false;
                sc.saveAndAddButtonVal = false;
            };

            if (sc.saveButtonVale) {
                //do save only operation
            } else if (sc.saveAndAddButtonVal) {
                //do save and add op
            }

           // reset your button vals
           sc.resetButtonValues();
    }
}

Answer 4

您可以同时保留ng-click 和type="submit"。在ng-click 中，您只需更新控制器的参数并在事件ng-submit 中验证它：

<div ng-controller="SomeController">
<form ng-submit="save(record)">
    <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
    <button type="submit">Save</button>
    <button type="submit" ng-click="SaveAndAddClick=true">Save and Add Another</button>
</form>

所以这种方法可以避免你添加一个方法，然后调用一个冗余代码。

谢谢

Answer 5

ng-submit 还有其他优点。例如，无效的表格将不会被提交。使用 ng-submit 而不是 ng-click 总是更好。但是，在您的情况下，更好的方法是

1. 使用 ng-click 按钮。
2. 验证控制器中的表单。请记住，即使表单无效，ng-click 也会提交表单。
3. 在 somecontroller 中对两个不同的 ng-click 调用两个不同的 $scope.functions。

希望对您有所帮助。

Answer 6

ngSubmit 允许您在输入文本框时按Enter 提交。如果该行为不重要，只需使用 2 ngClick。如果很重要，可以修改第二个按钮使用ngClick。所以你的代码变成了：

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button ng-click="saveAndAdd(record)">Save and Add Another</button>
    </form>
</div>

Answer 7

在我看来，您有两种选择： 1：在“保存并添加另一个”按钮上使用 ngClick 事件并删除“type='submit'”部分。然后在您调用 gor ngClick 的任何函数中，您可以保存然后重置值，在该函数中调用 save()。 2：完全删除 ngSubmit，只对两个按钮使用 ngClicks。