我试图做角度表格验证我没有收到错误消息当我点击提交，我已经添加了两个文本两个接收采取名字和姓氏出了什么问题我找不到请告诉我
<!-- Bootstrap Core CSS -->
<link href="resources/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="resources/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="resources/sb-admin/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Date picker css -->
<link rel="stylesheet" href="resources/datepicker/datepicker.min.css"></link>
<!-- My css -->
<link rel="stylesheet" href="resources/mine/css/MyCss.css"></link>
<script src="resources/js/angular/angular.js"></script>
<script src="resources/js/app/app.js"></script>
</head>
<body ng-app="myapp" ng-controller="mainController">
<div id="wrapper">
<!-- Navigation -->
<%@ include file="Menu.jsp" %>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><b>Student Enrollment</b></h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Basic Information for admin
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-body"> <!-- flot-chart previus class name -->
<form id="userForm" method="post" class="form-horizontal" action="login" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.terms.$invalid && (userForm.terms.$dirty || submitted)}">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" name="firstname" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your First Name is required.</p>
</div>
<div class="col-xs-3">
<input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your Last Name is required.</p>
</div>
</div>
<div class="form-group">
<div class="col-xs-1 ">
<button type="submit" class="btn btn-primary ">Submit</button>
</div>
<div class="col-xs-1 ">
<button type="reset" class="btn btn-default" id="rstbutton">Refresh</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script type="text/javascript" src="resources/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="resources/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="resources/metisMenu/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="resources/sb-admin/sb-admin-2.js"></script>
</body>
</html>
答案 0 :(得分：0)
为此form
name="userForm"的名称
<form name="userForm">
<input type="text" name="name" ng-model="" >
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">Your Last Name is required.</p>
<input type="text" name="firsname" ng-model="" >
<p ng-show="userForm.firstname.$error.required && (userForm.firstname.$dirty || submitted)" class="help-block">Your First Name is required.</p>
</form>
答案 1 :(得分：0)
我刚创建了一个与您的标题位匹配的简单验证示例代码。请从以下代码中了解一下。它会解决你的问题。您可以从AngularJs Developer Guild
获取详细信息
angular.module('myapp', []).controller('mainController', function ($scope) {
$scope.user = {};
$scope.submitForm = function () {
if ($scope.userForm.$valid) {
alert('form is valid');
}
}
})<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myapp" ng-controller="mainController">
<div id="wrapper">
<!-- Navigation -->
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><b>Student Enrollment</b></h3>
</div>
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Basic Information for admin
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-body">
<!-- flot-chart previus class name -->
<form name="userForm" class="form-horizontal" novalidate>
<label>
First Name:
<input type="text" ng-model="user.firstName" name="firstname" required="" />
</label>
<br />
<div ng-show="userForm.$submitted || userForm.firstname.$touched">
<div ng-show="userForm.firstname.$error.required">Your First Name is required..</div>
</div>
<label>
Last Name:
<input type="text" ng-model="user.lastName" name="lastname" required="" />
</label>
<br />
<div ng-show="userForm.$submitted || userForm.lastname.$touched">
<div ng-show="userForm.lastname.$error.required">Your Last Name is required..</div>
</div>
<input type="submit" ng-click="submitForm()" value="submit" />
</form>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- use this CDN only for his code snippet otherwise use bottom commented local angular.min.js and app.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<!--
<script src="angular.min.js"></script>
<script src="app.js"></script>
-->
</body>
</html>
答案 2 :(得分：0)
需要进行一些代码更改：
ng-model两个文本框应该不同。在你的代码中，两个输入看起来都一样。name属性值应该不同。工作演示：
var app = angular.module('myApp',[]);
app.controller('myController',function( $scope ) {
$scope.validate = function() {
alert('submitting..');
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="myController">
<form name="userForm" ng-submit="userForm.$valid && validate()" novalidate>
<div class="form-group">
<label class="col-xs-2 control-label">Student Full Name</label>
<div class="col-xs-3">
<input type="text" name="firstname" class="form-control" ng-model="user.firstname" placeholder="Your Name" ng-required="true">
<p ng-show="submitted == true && userForm.firstname.$error.required" class="help-block">Your First Name is required.</p>
</div>
<div class="col-xs-3">
<input type="text" name="lastname" class="form-control" ng-model="user.lastname" placeholder="Your Name" ng-required="true">
<p ng-show="submitted == true && userForm.lastname.$error.required" class="help-block">Your Last Name is required.</p>
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted = true"/>
</form>
</div>