angularjs – 如何使用ng-messages显示Checkbox集和Radio set的
发布时间:2020-12-17 17:41:31 所属栏目:安全 来源:网络整理
导读:我一直在尝试验证Checkbox set和Radio set并使用ng-messages指令显示错误消息但是它没有按预期工作. ng-messages根本不显示错误消息.我正在使用html文件填充错误消息.在解决错误之前,我的表单中将禁用提交按钮. 如何在以下情况下显示Checkbox集和Radio set的
我一直在尝试验证Checkbox set和Radio set并使用ng-messages指令显示错误消息但是它没有按预期工作. ng-messages根本不显示错误消息.我正在使用html文件填充错误消息.在解决错误之前,我的表单中将禁用提交按钮.
如何在以下情况下显示Checkbox集和Radio set的错误消息: >收音机中未选择一个选项? 这是我的表格: <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(); } 附:注意正确的名称:userForm是< form>的HTML名称,user是绑定表单的模型的名称. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |