ng-submit action called after ng-click

2019-05-23 03:09发布

站内问答 / JavaScript
1639 3 4

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.

3条回答
ゆ 、 Hurt°
2楼-- · 2019-05-23 03:48

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

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2019-05-23 03:49

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">
查看更多
0人赞 添加讨论(0) 举报
再贱就再见
4楼-- · 2019-05-23 03:57

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)