无法将 Angular JS 表单验证与 Spring 表单标签一起使用答案

【问题标题】：Unable to use Angular JS Form Validation with Spring form tags无法将 Angular JS 表单验证与 Spring 表单标签一起使用
【发布时间】：2016-07-06 19:20:44
【问题描述】：

我已经使用 Spring Form 标签创建了一个 JSP 页面，我正在尝试使用 AngularJS Form Validations 来验证我的表单。但是表单验证不起作用。

这是表单的 sn-p：

<html ng-app>
    <body>
        <form:form name="signupForm" class="form-horizontal" action="/admin"
            method="POST" modelAttribute="userVO"  novalidate = "novalidate">

            <div class="form-group" ng-class="{'has-error' : signupForm.username.$error.required && signupForm.username.$dirty}">
                    <label for="userName" class="col-sm-4 control-label" style="text-align:center;">Username<span class="rqrd">*</span></label>
                    <div class="col-sm-8">
                        <form:input path="userName" placeholder="UserName" class="form-control" ng-model="signupForm.username" required="required"/>
                    </div>
                    <span ng-show="signupForm.username.$error.required && !signupForm.username.$pristine" class="help-block">
                    Username is required
                    </span>
            </div>
            <div class="form-group" ng-class="{'has-error' : signupForm.password.$error.required && signupForm.password.$dirty}">
                    <label for="password" class="col-sm-4 control-label" style="text-align:center;">Password<span class="rqrd">*</span></label>
                    <div class="col-sm-8">
                        <form:password path="password" placeholder="Password" class="form-control" ng-model="signupForm.password" required="required"/>
                    </div>
                    <span ng-show="signupForm.password.$error.required && !signupForm.password.$pristine" class="help-block">
                    Password is required
                    </span>
            </div>
</body>
</form:form>
</html>

我已将 Spring 表单标记库包含为： <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> 和 angular.min.js 和使用 CDN 的引导程序：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>

据此，当用户名不是原始的（或者是脏的）并且它是empty时，它应该显示span标签中提到的行。但它没有显示它，除此之外，如果是这种情况，它应该向 div 添加 'has-error' 类，并且在 chrome 和 firefox 中的开发人员工具上检查时也不会发生这种情况。

我浏览了这个 link 并使用 data-ng- 而不是 ng- 但问题没有解决。

我不确定确切的问题是什么，所以我无法解决它。

任何帮助将不胜感激。感谢期待。

【问题讨论】：

标签： html angularjs spring forms validation

【解决方案1】：

您需要删除该操作并使用 ng-submit

<html ng-app>
    <body>
        <form:form name="signupForm" class="form-horizontal" ng-submit="submitForm" novalidate>

            <div class="form-group" ng-class="{'has-error' : signupForm.username.$error.required && signupForm.username.$dirty}">
                    <label for="userName" class="col-sm-4 control-label" style="text-align:center;">Username<span class="rqrd">*</span></label>
                    <div class="col-sm-8">
                        <form:input path="userName" placeholder="UserName" class="form-control" ng-model="signupForm.username" required="required"/>
                    </div>
                    <span ng-show="signupForm.username.$error.required && !signupForm.username.$pristine" class="help-block">
                    Username is required
                    </span>
            </div>
            <div class="form-group" ng-class="{'has-error' : signupForm.password.$error.required && signupForm.password.$dirty}">
                    <label for="password" class="col-sm-4 control-label" style="text-align:center;">Password<span class="rqrd">*</span></label>
                    <div class="col-sm-8">
                        <form:password path="password" placeholder="Password" class="form-control" ng-model="signupForm.password" required="required"/>
                    </div>
                    <span ng-show="signupForm.password.$error.required && !signupForm.password.$pristine" class="help-block">
                    Password is required
                    </span>
            </div>
</body>
</form:form>
</html>

看看这个小提琴 https://codepen.io/sevilayha/pen/xFcdI

【讨论】：