我试图仅在成功验证时提交表单.验证适用于所需但不适用于ng-minlength
表单输入无效但表单仍在提交.
<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>
count: {{count}}<br />
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>
我究竟做错了什么.
我不想使用提交按钮禁用方法.
如果我声明了一个带有与ng-submit指令绑定的函数的表单,那么当单击提交按钮但表单无效时,如何防止执行该函数？
我找到了两个有很大缺点的解决方案,因此我不想使用它们:
将表单传递给控制器:
//HTML
<form ng-submit="myFunc($form, model)">
//JavaScript
$scope.myFunc = function($form, model) {
if ($form.$valid) {
//do stuff
}
}
这很糟糕,因为它将函数与从表单调用的函数联系起来.
当表单无效时,禁用提交按钮.
<input type="submit" ng-disabled="!form.$valid"/>
这很糟糕,因为禁用的元素很难使用.当按钮被悬停或点击时,工具提示不会显示,因此很难向尝试单击禁用按钮的用户提供反馈.
还有另一个解决这个问题的方法吗？
我创建了一个我的问题的独立案例: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>
基本上,该示例包含一个数字字段,其下方是错误消息,显示输入无效时(空或不是数字).
但是表单仍然会提交,虽然如果字段值无效,字段值设置为'undefined',我宁愿在发送到服务器之前检查表单是否有效(本例中的警告框).
所以我的问题是 - 在AngularJS中,有没有办法检查一个表单是否在控制器内有效？或者另一种阻止表单无效的提交方式？