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

rwa*_*ter 5 javascript forms angularjs angularjs-forms

我创建了一个我的问题的独立案例: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>
Run Code Online (Sandbox Code Playgroud)

基本上,该示例包含一个数字字段,其下方是错误消息,显示输入无效时(空或不是数字).

但是表单仍然会提交,虽然如果字段值无效,字段值设置为'undefined',我宁愿在发送到服务器之前检查表单是否有效(本例中的警告框).

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

Pan*_*kar 11

最好改变ng-submit表达方式

ng-submit="form.$valid && submit()"
Run Code Online (Sandbox Code Playgroud)

最好使用angular指令表达式.

  • 我喜欢这个最好的,是的,我愿意 (2认同)

Arū*_*kas 5

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

你需要的是什么

if ($scope.form.$valid) {
    //submit to server
}
Run Code Online (Sandbox Code Playgroud)

form表格名称在哪里

<form name="form"...
Run Code Online (Sandbox Code Playgroud)