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

Question

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.

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.

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

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

Solution 1

ngSubmit allows you to press Enter while 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:

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

Solution 2

You can keep both ng-click and type="submit". In the ng-click you can just update a parameter of your controller and validate that in the event 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

Solution 3

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.

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

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

Solution 4

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.

Solution 5

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.

View more solutions