Question

我是AngularJS的新手。我正在尝试由O＆＃39; Reilly在AngularJS一书中提到的演示。我知道当表单中有一个输入字段时，在该输入中按Enter键会导致触发ng-click和ng-submit操作。但是，就我而言，我只有一个输入字段，即使我没有在输入字段中按回车键，每次点击重置按钮时都会调用我的ng-submit动作。这是代码。

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

是否有任何逻辑或概念上的错误？当我使用AngularJS时，请也告诉我正确的提交和重置表单的方法。

Answer 1

在stardard html中，您需要设置type="reset"以表明这是一个重置按钮：

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

但是你会看到这种方法在角度方面存在问题，正如DEMO所示。当您点击Reset时，输入设置为为空而不是0 ，如您在代码中指定的那样：

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

出现此问题的原因是，您的$scope.reset首先运行，并且覆盖被浏览器的默认操作重置按钮（清除表单）输入）。

在角度方面，您需要采用不同的方式，您需要preventDefault并使用form.$setPristine()重置表单输入状态：

<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

从$ setPristine的文档中退出：

将表单设置为其原始状态。

可以调用此方法来删除＆＃39; ng-dirty＆＃39;上课并设置   形成其原始状态（ng-pristine类）。这种方法也会   传播到此表单中包含的所有控件。

在我们需要时，将表单设置回原始状态通常很有用   重用＆＃39;保存或重置后的表单。

Answer 2

而不是使用ng-submit，使用ng-click调用requestFunding（），它将解决您的问题。

Answer 3

为您的按钮提供适当的类型以控制他们是否提交表单 - 例如：

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

ng-click后调用ng-submit操作

3 个答案: