5

我创建了我的问题的一个孤立案例: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>

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

但是表单仍然会提交,尽管如果字段值无效,则将其设置为“未定义”,但我更喜欢在发送到服务器之前检查表单是否有效的方法(本例中的警报框)。

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

4

3 回答 3

11

最好改变ng-submit表达方式

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

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

于 2015-01-17T11:50:47.413 回答
5

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

你需要的是

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

form表格名称在哪里

<form name="form"...
于 2015-01-17T11:04:50.517 回答
1

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

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

这样你就可以避免添加额外的代码

于 2015-01-17T11:49:21.167 回答