我一直在尝试验证CheckBox set和Radio set并使用ng-messages指令显示错误消息但是它没有按预期工作. ng-messages根本不显示错误消息.我正在使用html文件填充错误消息.在解决错误之前,我的表单中将禁用提交按钮.
如何在以下情况下显示CheckBox集和Radio set的错误消息：
>收音机中未选择一个选项？
>复选框设置中未选择至少一个选项？
>缩放检查复选框集,以便我们检查至少2个或更多,检查等？
这是我的表格：
<form name="userForm" ng-submit="submitForm()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && !userForm.subscribe.$touched }">
<label class="checkBox-inline">
<input type="checkBox" id="subscribe1" value="option1" name="subscribe[]" ng-model="user.subscribe" required> 1
</label>
<label class="checkBox-inline">
<input type="checkBox" id="subscribe2" value="option2" name="subscribe[]" ng-model="user.subscribe" required> 2
</label>
<label class="checkBox-inline">
<input type="checkBox" id="subscribe3" value="option3" name="subscribe[]" ng-model="user.subscribe" required> 3
</label>
<div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid">
<div ng-messages-include="home/messages.html"></div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && !userForm.gender.$touched }">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" ng-model="user.gender" />
male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" ng-model="user.gender" />
female
</label>
</div>
<div class="help-block" ng-messages="userForm.gender.$error" ng-show="userForm.gender.$invalid">
<div ng-messages-include="home/messages.html"></div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-success " ng-disabled="userForm.$invalid">Submit</button>
</form>
messages.html
<span ng-message="required">This field is required</span> <span ng-message="minlength">This field is too short</span> <span ng-message="maxlength">This field is too long</span> <span ng-message="required">This field is required</span> <span ng-message="email">This needs to be a valid email</span>
controller.js
angular.module('myApp',['ngRoute','ngAnimate','ngMessages']);
angular
.module('myApp')
.controller('HomeCtrl',HomeCtrl);
HomeCtrl.$inject = ['$scope'];
function HomeCtrl($scope) {
$scope.userForm = {};
}
付款复选框设置：
<div class="form-group" ng-class="{ 'has-error' : userForm.payment.$invalid && userForm.payment.$touched }">
<label class="checkBox-inline">
<input type="checkBox" id="payment1" value="Visa" name="payment" ng-blur="doTouched()" ng-model="user.payment[1]" ng-required="!someSelected(user.payment)"> Visa
</label>
<label class="checkBox-inline">
<input type="checkBox" id="payment2" value="Mastercard" name="payment" ng-blur="doTouched()" ng-model="user.payment[2]" ng-required="!someSelected(user.payment)"> Mastercard
</label>
<label class="checkBox-inline">
<input type="checkBox" id="payment3" value="Cash" name="payment" ng-blur="doTouched()" ng-model="user.payment[3]" ng-required="!someSelected(user.payment)"> Cash
</label>
<div class="help-block" ng-messages="userForm.payment.$error" ng-show="userForm.payment.$invalid && userForm.payment.$touched">
<div ng-messages-include="home/messages.html"></div>
</div>
</div>
解决方法
检查此示例：
http://plnkr.co/edit/2w0lIf?p=preview
复选框列表使用ng-required指令和someSelected函数(在控制器中定义),该函数检查是否至少选择了一个项：
<div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && userForm.subscribe.$touched }">
<label class="checkBox-inline">
<input type="checkBox" id="subscribe1" value="option1" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[1]" ng-required="!someSelected(user.subscribe)"> 1
</label>
<label class="checkBox-inline">
<input type="checkBox" id="subscribe2" value="option2" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[2]" ng-required="!someSelected(user.subscribe)"> 2
</label>
<label class="checkBox-inline">
<input type="checkBox" id="subscribe3" value="option3" name="subscribe" ng-blur="doTouched()" ng-model="user.subscribe[3]" ng-required="!someSelected(user.subscribe)"> 3
</label>
<div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid && userForm.subscribe.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
选项按钮组更容易使用ng-required指令和条件！user.gender：
<div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && userForm.gender.$touched }">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" ng-model="user.gender" ng-required="!user.gender"/>
male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" ng-model="user.gender" ng-required="!user.gender"/>
female
</label>
</div>
<div class="help-block" ng-messages="userForm.gender.$error" ng-if="userForm.gender.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
ngBlur指令解决了只有当列表中的所有项都模糊时,复选框列表才会被“触摸”的问题,调用doTouched()函数::
$scope.doTouched = function() {
$scope.userForm.subscribe.$setTouched();
}
