Custom validation implementation for Check box rendering in table format

Question

I have a requirement in which I have to display check box in a row (Tabular way of displaying). I could not use the default checkbox implementation which Ionic provides due to some issue while displaying in a single row.

Therefore I came up with a implementation like this. Here I am using check mark icons from Ionicons, based on a flag I set it to true/false.

Till here its all good. But when it comes to Validation its not working as desired. When no checkbox is selected also form validation returns, form as valid.

Below is the sample HTML code

<form  name="form" id="form" novalidate>
  <div class="row">

<div ng-repeat="ao in counter"
     ng-class="{ 'has-errors-left' : form.cb_{{ao.id}}.$invalid && {{isRequired}} == true && $first, 
                 'has-errors-right' : form.cb_{{ao.id}}.$invalid && {{isRequired}} == true && $last,
                 'no-errors-left' : form.cb_{{ao.id}}.$valid && {{isRequired}} == true && $first,
                 'no-errors-right' : form.cb_{{ao.id}}.$valid && {{isRequired}} == true && $last }"
     id="border"                                       
     class="col col-33 item item-divider removeDividerColor parentDiv">
         <a class="button button-icon icon answerOption_{{ao.id}} answerOptionCB childDiv"
            ng-class="{ 'ion-ios-checkmark-outline': checkStatus === false, 'ion-ios-checkmark': checkStatus === true }"
            id="cb_{{ao.id}}"
            name="cb_{{ao.id}}" on-tap="checkStatus = !checkStatus"
            ng-required="!getRequired(isRequired, ao.id)"
            ng-init="checkStatus = false"
            ng-model="checkStatus">{{ao.Text}}
        </a>             
     </div>
  </div>
</form>

I have created a codepen in the above link. Kindly let me know where I am going wrong or is there any better way to implement group of checkbox in a tabular way (displayed in a single row).

Answer 1

You need to update your code in this way-

<div ng-controller="myCtrl">
    <ng-form name="myForm">
  <span ng-repeat="choice in choices">
    <label class="checkbox" for="{{choice.id}}">
      <input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" ng-required="value.length==0" />
{{choice.label}}
    </label>
  </span>
  <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
    </ng-form>
</div>

And Script goes here:-

function myCtrl($scope) {

    $scope.choices = [{"id":1, "value":"1", "label":"Good"}, {"id":2, "value":"2","label":"Ok"},{"id":3, "value":"3","label":"Bad"}];
    $scope.value = [];
    $scope.updateQuestionValue = function(choice){
        $scope.value = $scope.value || [];
        if(choice.checked){
            $scope.value.push(choice.value);
            $scope.value = _.uniq($scope.value);
        }else{
            $scope.value = _.without($scope.value, choice.value);
        }
    };
}

You can see the DEMO here.