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

Posted 2023-02-22

【中文标题】如何使用 Angular JS 处理表单中的多个提交按钮？

【英文标题】：How to handle multiple submit buttons in a form using Angular JS?

【发布时间】：2015-01-17 11:44:20

【问题描述】：

我正在使用 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
        );

【参考方案1】：

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

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

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

【参考方案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
    );
  

【参考方案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();
    

【参考方案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>

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

谢谢

【讨论】：

哇，我得试试。感谢您提供有趣的方法！

我正在使用它，但在我的情况下，它首先完成 ng-submit 功能，然后可能在 ng-click 中进行分配。这是正确的还是我做错了什么？

<button ng-click="SaveAndAddClick=true" type="submit" >Save and Add Another</button> 这样它将完美运行。问题是您的代码的执行。它从左开始并向右移动，所以先执行的都会执行。

【参考方案5】：

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

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

希望对您有所帮助。

【参考方案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>

【讨论】：

如果它不重要，那么任何一种方式都可以。 ngSubmit 仅在您想要进入提交行为时才有用（或者如果您有许多提交按钮，所有按钮都共享相同的行为，这与您的方案不同）。

第二个按钮不是普通按钮，因为按钮默认为 type="submit" 您需要添加 type="button" 否则它将同时运行提交操作和 ng-click 操作。在我最喜欢的浏览器中，按钮的默认类型是提交，但后来我仔细检查了自己，这个消息来源说不同的浏览器可能有不同的默认类型。 w3schools.com/tags/att_button_type.asp

这种方法不是最符合语义的解决方案。最好使用两个 type="submit" 按钮，然后使用带有分配的 ng-click 来设置范围变量，然后在控制器中打开。这样默认事件模型仍然适用。

这可行，但请注意，如果您使用$location.path('same/path/as/before/details')，这将不会刷新您的当前页面。如果您使用angular-ui-router，请使用$state.reload() 之类的东西；如果您使用的是默认角度路由器，请使用$route.reload()。

您没有考虑 angularjs 验证。使用 ng-submit 将导致对验证至关重要的表单提交。说它对输入按钮的行为很重要是不正确的。

【参考方案7】：

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

【讨论】：

是的，这就是我认为的解决方案，但是有理由在表单标签中使用 ng-submit 吗？比如，它提供什么？是为了验证还是什么？我不记得为什么我使用它而不是 ng-click。

是的，有。 ng-click 将绕过 html5 验证