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

How to handle multiple submit buttons in a form using Angular JS?

提问by Jason

I'm using AngularJS and I have a form where the user can enter data. At the end of the form I want to have two buttons, one to "save" which will save and go to another page, and another button labeled "save and add another" which will save the form and then reset it - allowing them to enter another entry.

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

How do I accomplish this in angular? I was thinking I could have two submit buttons with ng-click tags, but I'm using ng-submit on the form element. Is there any reason I NEED to be using ng-submit - I can't remember why I started using that instead of ng-click on the button.

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

The code looks something like:

代码看起来像：

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

And in the controller SomeController

并在控制器中 SomeController

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

采纳答案by Buu Nguyen

ngSubmitallows you to press Enterwhile typing on the textbox to submit. If that behavior isn't important, just use 2 ngClick. If it is important, you can modify the second button to use ngClick. So your code becomes:

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>

回答by Kris8889

You can keep both ng-clickand type="submit". In the ng-clickyou can just update a parameter of your controller and validate that in the event ng-submit:

您可以同时保留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>

So this approach avoids you from adding a method and then calling a redundant code.

因此，这种方法避免了您添加方法然后调用冗余代码。

Thanks

谢谢

回答by ram mil

Make them all buttons and type=submit. It makes it a little cleaner not mixing and matching inputs and buttons. So basically you're trying to execute one method in your controller to handle either button click.

使它们全部是按钮和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>

So, in your js file you'll have something like this.

所以，在你的 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();
    }
}

回答by Samuel Duzett

As I see it, you have two options: 1: Use an ngClick event on the "save and add another" button and remove the "type='submit'" portion. Then in whatever function you call gor the ngClick, you can save and then reset the values, calling save() within that function. 2: Remove the ngSubmit altogether and just use ngClicks for both buttons.

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

回答by ARJUN

If someone looking for a simple approach then just create a flag and toggle between button and submit.

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

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

Need to handle the flag according to user action.

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

回答by Jasmin Akther Suma

Remove ng-submit from "form" element and define ng-click functions separately on each button with type 'submit'.For invalidation check, define name property in form element tag. And check validation in scope function.

从“表单”元素中删除 ng-submit 并在每个类型为“提交”的按钮上分别定义 ng-click 功能。对于无效检查，在表单元素标签中定义名称属性。并检查范围功能中的验证。

<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 Function:

范围功能：

$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
    });
  }
}

回答by debugmode

ng-submit has other advantages too. For example, invalid form will not be submitted. It is always better to use ng-submit instead of ng-click. However, in your scenario, better approach would be

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

1. use ng-click on buttons.
2. validate form in controller. Keep in mind that ng-click will submit the form even if it is not valid.
3. call two different $scope.functions on two different ng-click in the somecontroller.

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

Hope it helps.

希望能帮助到你。