CODEWITHSUNDEEP
javascriptformsangularjs
Gaurav
Gaurav

Reputation: 3749

ng-submit action called after ng-click

I am new to AngularJS. I am trying a demo mentioned in AngularJS book by O'Reilly. I know that when there is one input field in the form, hitting enter key inside that input, would cause both ng-click and ng-submit action to be triggered. However, in my case, I have only one input field, even if I do not press enter key inside the input field, my ng-submit action is called everytime when i click on reset button. Here is code.

<!DOCTYPE html>
<html ng-app="">
<head lang="en">
    <meta charset="UTF-8">
    <title>Form Submit Action</title>
</head>
<body>
    <form ng-submit="requestFunding()"
          ng-controller="FormController">
        Estimate :
        <input ng-model="estimate"/>
        <br/>
        Recommended :
        {{recommended}}
        <br/>
        <Button>Fund My Start Up</Button>
        <Button ng-click="reset()">Reset</Button>
    </form>
    <script src="Scripts/angular.js"></script>

    <script>
        function FormController($scope)
        {
            $scope.estimate = 0;

            computeNeeded = function(){
                $scope.recommended = $scope.estimate * 10;
            };

            $scope.$watch('estimate', computeNeeded);

            $scope.requestFunding = function()
            {
                window.alert("Add More Customers First");
            };

            $scope.reset = function()
            {
                $scope.estimate = 0;
            };
        }
    </script>
</body>
</html>

Is there any logical or conceptual mistake ? Please also enlighten my on the right way to submit and reset the form when I am using AngularJS.

Upvotes: 2

Views: 3916

Answers (3)

Navjot Sharma
Navjot Sharma

Reputation: 11

instead of using ng-submit, use ng-click to call requestFunding(), it will solve your problem.

Upvotes: 1

Khanh TO
Khanh TO

Reputation: 48972

In stardard html, you need to set type="reset" to indicate that this is a reset button:

 <button type="reset" ng-click="reset()">Reset</button>

But you would see a problem with this approach in angular, as this DEMO shows. When you click Reset, the input is set to empty instead of 0 as you specify in your code:

$scope.reset = function() {
    $scope.estimate = 0;
};

The reason for this problem is that your $scope.reset runs first and is overwritten by the default action of the browser for the reset button (clear the form inputs).

In angular, you need to do differently, you need to preventDefault and use form.$setPristine() to reset the form input states:

<form name="form" ng-submit="requestFunding()" ng-controller="FormController"> //give the form a name
    Estimate :
    <input ng-model="estimate" />
    <br/>Recommended : {{recommended}}
    <br/>
    <button>Fund My Start Up</button>
    <button ng-click="$event.preventDefault(); reset(); form.$setPristine();">Reset</button>
  </form>

DEMO

Quouted from the docs for $setPristine:

Sets the form to its pristine state.

This method can be called to remove the 'ng-dirty' class and set the form to its pristine state (ng-pristine class). This method will also propagate to all the controls contained in this form.

Setting a form back to a pristine state is often useful when we want to 'reuse' a form after saving or resetting it.

Upvotes: 6

Sebastian
Sebastian

Reputation: 17413

Give your buttons proper types to control if they are submitting the form - e.g:

<button type="reset" value="Reset">
<button type="submit" value="Submit">

Upvotes: 0

Related Questions