Javascript AngularJS-如果表单无效，则阻止提交表单_Javascript_Angularjs_Forms_Angularjs Forms

Javascript AngularJS-如果表单无效，则阻止提交表单

javascript angularjs forms

Javascript AngularJS-如果表单无效，则阻止提交表单,javascript,angularjs,forms,angularjs-forms,Javascript,Angularjs,Forms,Angularjs Forms,我为我的问题创建了一个单独的案例：以下是独立案例的代码： <!DOCTYPE html> <html ng-app="App"> <head></head> <body ng-controller="ExampleController"> <form name="form" ng-submit="submit()" novalidate> <input type="number"

我为我的问题创建了一个单独的案例：

以下是独立案例的代码：

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




必需的

不是一个数字

var-App=angular.module（'App'，[]）；
App.controller（'ExampleController'，函数（$scope）{
$scope.submit=函数（）{
警报（'发送到服务器：'+$scope.number）；
}
});
App.run（）；

基本上，该示例包含一个数字字段，下面是错误消息，显示输入无效的时间（空或不是数字）

但是表单仍然会提交，尽管字段值设置为“undefined”，如果它无效，我更希望在发送到服务器之前检查表单是否有效（本例中的警报框）

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

你需要的是

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

其中

form

是表单名称

<form name="form"...

您可以尝试使用ng disabled指令
      <button type="submit" ng-disabled='number==null'>Submit</button>

提交

通过这种方式，您可以避免添加额外的代码，最好在ng submit
表达式中进行更改
ng-submit="form.$valid && submit()"

角度指令表达式的最佳使用。
me最喜欢这个，是的，我do@meffectUI本身干净整洁..我几乎在所有表单中都使用了它。。