24

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
        });
}
Improve this question

7 Answers 7

Reset to default
33

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Wow, I'll have to try that. Thanks for the interesting approach!
I am using this but in my case it is first completing ng-submit function and then possibly doing the assignment in ng-click. Is that correct or am doing some mistake?
<button ng-click="SaveAndAddClick=true" type="submit" >Save and Add Another</button> This way it will work perfect. Problem was execution of your code. it starts from left and move to right, so whatever comes first gets executed.
12

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>
Improve this answer

5 Comments

If it's not important, then either way will work. ngSubmit is only useful if you want enter-to-submit behavior (or if you have many submit buttons, all share the same behavior, unlike your scenario).
The second button is not a normal button because buttons default to type="submit" you would need to add type="button" or it will run both the submit action and the ng-click action. In my favorite browser the default type for a button was submit but then I double checked myself and this source says that different browsers may have different default types. w3schools.com/tags/att_button_type.asp
This method would not be the most semantic solution. It would be better to use two type="submit" buttons and then use an ng-click with an assignment to set up a scope var to then switch on in the controller. That way the default event model would still apply.
this works, but do note that if you use $location.path('same/path/as/before/details') that this will NOT refresh your current page. use something like $state.reload() if you use angular-ui-router or $route.reload() if you are using the default angular router.
You are not considering angularjs validation. Using ng-submit will result into form submission that is crucial for validation. It's not correct saying that it's just important for the enter button behaviour.
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();
    }
}
Improve this answer

Comments

2

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.

Improve this answer

2 Comments

Yeah that's what I was thinking the solution was, but is there a reason to be using ng-submit in the form tag? Like, what does it offer? Is it for validation or something? I can't remember why I used that instead of ng-click.
yes there is. ng-click will bypass html5 validation
1

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.

Improve this answer

Comments

0

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

  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.

Hope it helps.

Improve this answer

Comments

0

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.

<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
    });
  }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.