AngularJS - 防止表单提交的，如果它是无效的

我已经创建了我的问题的一个孤立的案例： http://plnkr.co/edit/6LXW5TG76LC9LNSrdpQC AngularJS - 防止表单提交的，如果它是无效的

这里是隔离的情况下的代码：

<!DOCTYPE html> 
<html ng-app="App"> 

    <head></head> 

    <body ng-controller="ExampleController"> 

    <form name="form" ng-submit="submit()" novalidate> 
     <input type="number" name="number" ng-model="number" required><br> 
     <span ng-show="form.number.$error.required && form.number.$touched">Required<br></span> 
     <span ng-show="form.number.$error.number">Not a number<br></span> 
     <input type="submit"> 
    </form> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 

    <script> 

     var App = angular.module('App', []); 

     App.controller('ExampleController', function($scope) { 

     $scope.submit = function() { 
      alert('send to server: ' + $scope.number); 
     } 

     }); 

     App.run(); 

    </script> 

    </body> 

</html>

基本上，例如包含一个数字字段，并在其下方显示错误消息，显示输入无效（空或不是数字）。

但是表单仍然会提交，尽管如果字段值无效，那么字段值设置为'undefined'，但我希望在发送到服务器之前检查表单是否有效（在这个例子）。

所以我的问题是 - 在AngularJS中，有没有一种方法来检查表单是否在控制器内有效？或者另一种方式来阻止表单提交无效？

来源

2015-01-17 rwacarter

做得更好变化ng-submit表达

ng-submit="form.$valid && submit()"

最佳使用角度指令表达。

来源

2015-01-17 11:50:47

我喜欢这一个最好的，是的，我做 – meffect

@meffect干净整洁的UI本身..我几乎用我的所有形式.. –

http://plnkr.co/edit/kqLUJpjt0n0anJxzm6en?p=preview

你需要的是

if ($scope.form.$valid) { 
    //submit to server 
}

其中form是窗体名称

<form name="form"...

来源

2015-01-17 11:04:50

您可以NG-禁用指令

 <button type="submit" ng-disabled='number==null'>Submit</button>

尝试

这样，你就能够避免增加额外的代码

来源

2015-01-17 11:49:21 kinetix

AngularJS - 防止表单提交的，如果它是无效的

回答

相关问题