角度表单验证问题 - 角度验证没有发生

Question

我的表格如下图所示。但是在单击提交按钮时，表单正在提交而没有经过验证......我正在使用弹簧安全性，所以 xhr 调用不允许从服务器重定向到另一个页面（所以我必须提供 url）。如果我删除“novalidate”页面将采用默认的 html 验证

<form name="loginForm" id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" novalidate>
		<div class="panel-body">
			<div class="form-group has-feedback">
				<input type="email" name="j_username" ng-model="j_username"
					class="form-control placeholder-color" placeholder="Email"
					ng-pattern="/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/"
					required autocomplete="off" />
				<div class="form-devider"></div>
				<div ng-messages="loginForm.j_username.$error"
					ng-if="loginForm.$submitted">
					<div class="has-error" ng-message="required">
						<spring:message code="peak.email.required" />
					</div>
					<div class="has-error" ng-message="pattern">
						<spring:message code="peak.enter.valid.email" />
					</div>
				</div>
			</div>
			<div class="form-group has-feedback">
				<input type="password" name="j_password" id="j_password"
					placeholder="Password" class="form-control placeholder-color"
					ng-model="j_password" required autocomplete="off" /> <%-- <input
					type="hidden" name="url" id="url" placeholder="Password"
					ng-model="link"
					ng-init="link='${pageContext.request.contextPath}/j_spring_security_check'" /> --%>
				<div class="form-devider"></div>
				<div ng-messages="loginForm.j_password.$error"
					ng-if="loginForm.$submitted">
					<div class="has-error" ng-message="required">
						<spring:message code="peak.password.required" />
					</div>
				</div>
			</div>
		</div>
		<div id="login-error-box1" style="display: none"></div>
		<button type="submit"
			class="btn btn-block custome-btn-orange pbi-mt15">
			<spring:message code="peak.login" />
		</button>
	</form>

提前致谢

Answer 1

看看这个 plnkr：http://plnkr.co/edit/rZaKXEp7vspvEerFtVH8?p=preview

$scope.validate = function(isValid,$event){
      console.log(isValid);
      console.log($scope.loginForm);
      if(!isValid){
        $event.preventDefault();
      }
    }

您需要创建一个 Angular 控制器，该控制器具有在 ng-submit 上运行的功能。该函数将查找表单是否无效并阻止它发布表单。 这使您可以查看错误消息。