Angular Form validation to show error message

Question

I have a form, where i wanted to show inline error message when none of the checkbox is selected. But i'am not able to show the message for the following condition

I have a form with two radio options - No, Yes. When user chooses yes, he have a option to choose values from a list of checkboxes. When the user chooses Yes radio button, he is supposed to choose at least one checkbox or else an error message should be displayed prompting the user to choose at least with one checkbox value. If radio option is No, no checkbox selection is required. How would i achieve this using angular form validation ?

 <p ng-if="noCheckboxSlected" class="form-error"><img src="images/icon-error.png" alt=""/>Sorry, please select a option.</p>
        <form name="answersToQuestions">
        <div class="ice-form-radio">
             <input type="radio" name="mpq{{allergies.questionId}}" ng-model="allergies.answer" ng-click="setQuestion(false)" value="no">
             <label for="mpq{{allergies.questionId}}no"><span>No </span></label>
        </div>
            <div class="ice-form-radio">
                <input type="radio" name="mpq{{questionId}}"  ng-model="allergies.answer" value="yes" ng-click="setCondition(true)"/>
                <label for="mpq{{questionId}}yes"><span>Yes</span></label>
            </div>
            <table>
                <tr ng-repeat="(key, allergyList) in  filteredAllergies track by $index">
                    <td ng-repeat="allergy in allergyList track by $index">
                        <div class="ice-form-checkbox">
                            <input id="condition-{{allergy.allergyCode}}" ng-model="allergy.allergyIndicator" type="checkbox" />
                            <label for="condition-{{allergy.allergyCode}}"><span>{{allergy.allergyName}}</span></label>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        </form>

Thanks

Answer 1

First you should use ng-change instead of ng-click on your input. ng- change is trigger when the value of your input change.

Still using ng-change, you could write a method in your controller that check if at least one of your checkbox is check and set a variable to true or false :

<tr ng-repeat="(key, allergyList) in  filteredAllergies track by $index">
  <td ng-repeat="allergy in allergyList track by $index">
    <div class="ice-form-checkbox">
       <!-- put ng-change here -->
      <input id="condition-{{allergy.allergyCode}}" ng-model="allergy.allergyIndicator" type="checkbox" ng-change="checkOnce()"/>
      <label for="condition-{{allergy.allergyCode}}"><span>{{allergy.allergyName}}</span></label>
    </div>
  </td>
</tr>

and in your controller :

$scope.onceIsCheck = false;
$scope.checkChange = function () {
  $scope.onceIsCheck = false;
  for (var i = 0; i < $scope.filteredAllergies.length; ++i) {
     if($scope.filteredAllergies[i].allergyIndicator) {
       $scope.onceIsCheck = true;
     }
  }
};

In your view :

<p ng-if="onceIfCheck">You have to check at least one item</p>