选择下拉菜单并且单选按钮验证无效。请在下面找到代码。 HTML required选项已经存在于标记中，但仍然无效。我错过了什么？
这是plunker
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"];
$scope.submit = function ($event) {
if ($scope.myForm.$invalid) {
// Or some other update
$scope.myForm.$submitted = true;
$event.preventDefault();
}
}
});
</script>
<title>Registration Form</title>
</head>
<body ng-controller="MainCtrl">
<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>
<div>
<form name="myForm" action="RegistrationServlet.do" method="POST" >
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>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>
Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" ng-pattern="/^[a-zA-Z]{3,20}/" required placeholder="Last Name"/>
<span style="color:red" ng-show="myForm.lname.$error.pattern">Last name cannot be less than 3 letters with no digits</span><br/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.lname.$error.required">Please fill field above<br></span>
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/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.pwd.$error.required">Please fill field above<br></span>
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"/>
<span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.pwd2.$error.required">Please fill field above<br></span><br/>
Gender: <input type="radio" name="female" ng-model="color1" value="female" ng-required="!color1"/>Female <input type="radio" name="male" ng-model="color1" value="male" ng-required="!color1"/>Male <br/><br/>
Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{9,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/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.mobile.$error.required">Please fill field above<br></span>
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/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.email.$error.required">Please fill field above<br></span>
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>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.address.$error.required">Please fill field above<br></span><br/>
Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.street.$error.required">Please fill field above<br></span><br/>
Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.area.$error.required">Please fill field above<br></span><br/>
City: <select ng-model="citySelection" class="form-control" ng-options="city for city in cityArray" required>
<option value="">(Pick One)</option>
</select>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.citySelection.$error.required">Please fill field above<br></span><br/>
State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.state.$error.required">Please fill field above<br></span><br/>
Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.country.$error.required">Please fill field above<br></span><br/>
Pin:<input type="text" class="form-control input-sm" ng-pattern="/^\d{6,6}$/" 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>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.pin.$error.required">Please fill field above<br></span><br/>
<button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：2)
此处已更新plunker
您忘记分配name属性以选择并将其用于错误显示： -
例如name="city"并将其用于ng-if="myForm.$submitted && myForm.city.$error.required"
City: <select name="city" ng-model="citySelection" class="form-control" ng-options="city for city in cityArray" required>
<option value="">(Pick One)</option>
</select>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.city.$error.required">Please fill field above<br></span><br/>
如果是单选按钮，您没有使用相同的name属性name="gender"，并且没有提及错误<span>： - ）
Gender: <input type="radio" name="gender" ng-model="color1" value="female" ng-required="!color1"/>Female <input type="radio" name="gender" ng-model="color1" value="male" ng-required="!color1"/>Male <br/><br/>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.gender.$error.required">Please fill field above<br></span>
答案 1 :(得分：2)
如果是单选按钮和城市下拉列表验证，则应删除控制器代码中的$event.preventDefault();。这完全解决了这个问题。
查看work plunkr“http://plnkr.co/edit/TnIfWhcKESRHJFPPisNl?p=preview”
为性别添加以下内容以在屏幕上显示消息，并将name属性更改为单个常用值，例如“gender”：
Gender: <input type="radio" name="gender" ng-model="color1" value="female" ng-required="!color1"/>Female <input type="radio" name="gender" ng-model="color1" value="male" ng-required="!color1"/>Male <br/><br/>
<span style="color:red" ng-show="myForm.gender.$error.require == true">Select Gender</span>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.gender.$error.required">Please fill field above<br></span><br/>
此外，为城市添加以下内容以在屏幕上显示消息并向城市name = "city"添加“名称”属性：
City: <select ng-model="citySelection" name = "city" class="form-control" ng-options="city for city in cityArray" required>
<option value="">(Pick One)</option>
</select>
<span style="color:red" ng-show="myForm.city.$error.require == true">city cannot be empty</span>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.city.$error.required">Please fill field above<br></span><br/>
答案 2 :(得分：1)
对于city字段，为select标记指定一个名称，并在验证运行中为该名称标记指定服务错误...即（myForm.sample。$ error.required）
Here is the code for drop down validation
<select name="sample" ng-model="citySelection" class="form-control" ng-options="city for city in cityArray" required>
<option value="">(Pick One)</option>
</select>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.sample.$error.required">Please fill field above<br></span><br/>
答案 3 :(得分：0)
使用此
City: <select name="dd" ng-model="citySelection" class="form-control" ng-options="city for city in cityArray" required>
<option value="">(Pick One)</option>
</select>
<span style="color:red" class="error" ng-if="myForm.$submitted && myForm.dd.$error.required">Please fill field above<br></span><br/>