Question

我创建了一个我的问题的孤立案例： http://plnkr.co/edit/6LXW5TG76LC9LNSrdpQC

以下是孤立案例的代码：

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

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

但是表单仍然会提交，尽管字段值设置为“未定义”＆＃39;如果它无效，我宁愿在发送到服务器之前检查表单是否有效（本例中的警告框）。

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

Answer 1

最好将ng-submit表达式更改为

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

最好使用角度指令表达式。

Answer 2

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

你需要的是

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

其中form是表单名称

<form name="form"...

Answer 3

您可以尝试使用 ng-disabled 指令

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

通过这种方式，您可以避免添加其他代码

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

3 个答案: