ng-submit action called after ng-click

2019-05-23 03:06发布

站内文章 / JavaScript
31 0 0

问题:

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.

回答1:

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.



回答2:

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



回答3:

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


标签： javascript forms angularjs
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~