How to show error messages for a set of flags and a radio using ng messages?

Question

I am trying to check a set of checkboxes and a set of radio stations and show error messages using the ng-messages directive, but it does not work as expected. NG messages do not display an error message at all. I fill out error messages using the html file. Until the errors are resolved, the submit button will be disabled in my form.

How can I show error messages for the checkbox and radio set when:

• Not one option selected in Radio Set?

• At least one option is not selected in the set of flags?

• Checking the checkbox is checked so that we can check at least 2 or more, etc.

Here is my form:

<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 = {}; } 

Set of checkboxes for payment:

 <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> 

Answer 1

Check out this example:

http://plnkr.co/edit/2w0lIf?p=preview

The list of flags uses the ng-required directive with the someSelected function (defined in the controller), which checks whether at least one element is selected:

 <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> 

The group of selection buttons is simpler and use the ng-required directive with the condition !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> 

The ngBlur directive fixes the problem when the list of flags becomes “affected” only when all the elements in the list are blurred by calling the doTouched () function ::

  $scope.doTouched = function() { $scope.userForm.subscribe.$setTouched(); } 

PS pay attention to the correct names: userForm is the name of the HTML <form> , user is the name of the model to which the form is attached.

Answer 2

Here is an example that I created that offers our goal.
Our application would create a few questions about the checkboxes on the page, and $ touched didn't seem to work on input input fields that have the same name attribute.
Also the custom angular plugins / directives I've seen for checkboxes are nice (where they just snap to 1 array model), but don't seem to support "required".

Here I set the custom_touched event for the question that I asked with ng-click:

http://jsfiddle.net/armyofda12mnkeys/9gLndp5y/7/

 <li ng-repeat="choice in currentquestion.choices"> <input type="checkbox" ng-model="choice.selected" ng-required="!somethingSelectedInTheGroup(currentquestion.required, currentquestion.choices)" ng-click="currentquestion.custom_touched = true;" name="{{currentquestion.question_code}}" id="{{currentquestion.question_code}}_{{choice.option_value}}" value="{{choice.option_value}}" /> {{choice.orig_option_txt}} </li> $scope.somethingSelectedInTheGroup = function (is_required, choices) { if(is_required) { for(var i = 0; i < choices.length; i++) { var choice = choices [i]; if(choice.selected) { return true; } } return false; } else { return false; } } 

Note: I originally used <div ng-if="questionform.$dirty && questionform[currentquestion2.question_code].$invalid"> but this does not work for a few questions about checkboxes on the form / page.