我有一个表单，我正在检查ng-pattern的错误输入，并在错误输入时显示错误消息。
我希望在用户尝试使用ng-disabled选项提交包含错误值的表单时禁用表单提交，因为html的required选项在单击提交按钮时检查空文本框。我该如何实现这一目标？我是否必须使用自定义指令？
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${pageContext.request.contextPath}/js/Registratonvalidation.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
{
$scope.numOnlyRegex = /^\d{1,6}$/;
});
</script>
<!--<script src="${pageContext.request.contextPath}/numOnlyRegex.js"></script>-->
<title>Registration Form</title>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<h2 class="text-muted">Registration form</h2>
<!--onSubmit="return validate()"-->
<div ng-app="myApp" ng-controller="numOnlyRegex">
<form name="myForm" action="RegistrationServlet.do" method="POST" novalidate >
First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" placeholder="First Name" required/>
<span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/>
Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="uname" ng-pattern="/^[a-zA-]{3,20}/" required placeholder="Last Name"/>
<span style="color:red" ng-show="myForm.lname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/>
<p>Password:
<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd" ng-minlength="3" ng-model="pwd" required placeholder="Password"/>
<span style="color:red" ng-show="myForm.pwd.$error.minlength">password cannot be less than 3 letters</span><br/>
Confirm Password:<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-minlength="3" ng-model="pwd2" required placeholder="Confirm Password"/><br/>
<span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span><br/>
Gender: <input type="radio" name="female" ng-model="color" value="female" ng-required="!color"/>Female <input type="radio" name="male" ng-model="color" value="male" ng-required="!color"/>Male <br/><br/>
Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,9}$/" ng-model="mobile" required placeholder="Mobile"/>
<span style="color:red" ng-show="myForm.mobile.$error.pattern">Please enter a valid mobile number</span><br/>
Email:<input type="email" class="form-control input-sm" name="email" ng-pattern="/\S+@\S+\.\S+/" ng-model="email" required placeholder="Email"/>
<span style="color:red" ng-show="myForm.email.$error.pattern">Invalid email address</span><br/>
Address:<textarea class="form-control input-sm" name="address" ng-model="address" required placeholder="Address"></textarea>
<span style="color:red" ng-show="myForm.address.$error.require==true">Address cannot be empty</span><br/>
Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/>
Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/>
City: <select name="city" class="form-control" ng-model="city" required>
<option value="hyderabad">Hyderabad</option>
<option value="secunderabad">Secunderabad</option>
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
</select><br/>
State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/>
Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/>
Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" name="pin" ng-model="pin" required placeholder="Pin"/>
<span style="color:red" ng-show="myForm.pin.$error.pattern">Only six-digit number is allowed</span>
<input type="Submit" class="form-control btn btn-success" value="Submit" />
<!--ng-disabled="myForm.$invalid"-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：2)
这个link将有助于解释如何在表单生效之前禁用提交按钮。
您需要在ng-disabled="FORMNAME.$invalid"元素中添加<input type="Submit" class="form-control btn btn-success" value="Submit" />属性（将FORMNAME替换为表单数据的型号名称）。
应该这样做。以下评论与其他任何问题。
答案 1 :(得分：1)
您似乎希望所有字段都是必需的，但是当用户认为他们已准备好提交表单时，如果他们忘记了任何必填字段，则会通知他们。
通常这可以通过ng-submit和类似的方式实现：
<span ng-if="myForm.$submitted && myForm.formField.$error.required">Please enter information for 'formField'</span>
此处允许用户单击“提交”，但随后会显示有关所需字段的消息。
但是，只有在表单上未指定任何操作（action="RegistrationServlet.do"）时才能使用此功能。在您的情况下，您需要拦截表单提交。一种方法是捕获鼠标单击事件以在存在表单错误时禁用和更新表单：
app.controller('MainCtrl', function($scope) {
$scope.submit = function($event) {
if ($scope.myForm.$invalid) {
$scope.myForm.$submitted = true;
$event.preventDefault();
}
}
<form name="myForm" action="action.do" method="Post" novalidate>
<input type="text" name="formField" ng-model="formField" required><br>
<span class="error" ng-if="myForm.$submitted && myForm.formField.$error.required">Please fill field above<br></span>
<button type="submit" ng-click="submit($event)">Submit</button>
</form>
答案 2 :(得分：0)
您需要做的是使用ng-Submit，以便在用户点击提交时进行验证。
var app = angular.module('myApp',[]);
app.controller('numOnlyRegex',function($scope){
$scope.TestSubmit = function()
{
if($scope.myForm.$valid)
{
//normal submit
}
}
});
更新了基于你的插件