Javascript ng单击后调用的ng提交操作_Javascript_Forms_Angularjs

Javascript ng单击后调用的ng提交操作

javascript forms angularjs

Javascript ng单击后调用的ng提交操作,javascript,forms,angularjs,Javascript,Forms,Angularjs,我对AngularJS是新手。我正在尝试O'Reilly在AngularJS的书中提到的演示。我知道，当表单中有一个输入字段时，点击该输入中的enter键将触发ng click和ng submit操作。但是，在我的情况下，我只有一个输入字段，即使我没有在输入字段内按enter键，每次单击reset按钮时都会调用ng submit操作。这是代码 <!DOCTYPE html> <html ng-app=""> <head lang="en"> <

我对AngularJS是新手。我正在尝试O'Reilly在AngularJS的书中提到的演示。我知道，当表单中有一个输入字段时，点击该输入中的enter键将触发

ng click

和

ng submit

操作。但是，在我的情况下，我只有一个输入字段，即使我没有在输入字段内按enter键，每次单击reset按钮时都会调用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>


表单提交操作
估计：


推荐：
{{推荐}}


资助我的创业
重置
函数FormController（$scope）
{
$scope.estimate=0；
computeNeeded=函数（）{
$scope.recommended=$scope.estimate*10；
};
$scope.$watch（'估计'，已计算）；
$scope.requestFunding=函数（）
{
window.alert（“首先添加更多客户”）；
};
$scope.reset=函数（）
{
$scope.estimate=0；
};
}

是否存在逻辑或概念上的错误？

当我使用AngularJS时，请告知我提交和重置表单的正确方式。

如果您的按钮正在提交表单，请为其提供适当的类型来控制-例如：

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

在标准html中，您需要设置

type=“reset”

以指示这是一个重置按钮：

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

出现此问题的原因是您的

$scope.reset

首先运行，并被浏览器的默认操作覆盖，用于重置按钮（清除表单输入）

在angular中，您需要执行不同的操作，您需要

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>

//给表单一个名称
估计：

推荐：{{推荐}


资助我的创业
重置

从文档中导出的$：

将窗体设置为原始状态

可以调用此方法来删除“ng dirty”类并设置形成其原始状态（ng原始类）。这种方法也将传播到此窗体中包含的所有控件

当我们需要时，将表单设置回原始状态通常很有用保存或重置表单后“重用”表单

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

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