Angular JS /Angular Material .How to validate Checkbox group on click?

Question

I am using Angular Material and i am doing a simple validation with checkboxes.

The Problem :

At least One checkbox should be checked.

1 -If i click a checkbox and then i click again,the "required message" is not shown.

2 -If i click a checkbox and then i click again,and press "Tab Key" going throught each checkbox pressing Tab,when i reach the last one and press Tab Key,the message "Required" appears.

I want that ,condition number 1 occurs too, and one more thing ,i dont want to show the "required" message when the application loads. Here is my example : https://codepen.io/anon/pen/zrjjyL

I Hope you can give me a hand,Thanks!!!!!

Code :

HTML:

 <form name="myForm" ng-app="myApp" ng-controller="myController"  
 class="container-fluid" ng-submit="submit()">

<div class="row">
<div class="col-xs-8">
   <md-input-container md-no-float>
           <label>Name *</label>
           <input required="" name="nombre" ng-model="model.nombre">
           <div ng-messages="myForm.nombre.$error" ng-
show="myForm.nombre.$touched || myForm.$submitted">
              <div ng-message="required">Required.</div>
           </div>
        </md-input-container>
  <md-input-container md-no-float>
           <label>Search Options *</label>
           <input type="text" id="query" ng-model="query"/>
        </md-input-container>
   <md-input-container md-no-float>


        <md-list-item ng-repeat="item in items | filter:query">
            <p style ="font-size: 1.3rem;font-family: Roboto,'Helvetica 
Neue',sans-serif"> {{ item.title }} </p>

               <md-checkbox name ="permiso" ng-
model="model.opciones[item.id]['checked']" ng-required="!isChecked" ></md-
checkbox>
        </md-list-item>

 <div ng-messages="myForm.permiso.$error" ng-show=" myForm.permiso.$touched  
 || myForm.$submitted">
             <div ng-message="required">Required.</div>

        </md-input-container>


</div> </div>

JS:

var app = angular.module('myApp', ['ngAnimate', 'ngAria', 'ngMaterial',  
'ngMessages'])
.controller('myController', function($scope) {

    $scope.items = [{
        id: 1,
        title: 'Item A'
    }, {
        id: 2,
        title: 'Item A'
    }, {
        id: 3,
        title: 'Item C'
    }];;

    $scope.model = {}
    $scope.model.opciones = {};
    $scope.isChecked = false;
    $scope.$watch('model.opciones', function(selected) {
        $scope.isChecked = false;
        angular.forEach(selected, function(selectedItem) {
            if (selectedItem.checked) $scope.isChecked = true;
        });
    }, true);
});

Answer 1

You can check if the form has been modified with formName.$dirty . Then you can only show the error if the form is actually dirty.

<div ng-message="required" ng-if="myForm.$dirty">Required.</div>

Answer 2

You are iterating over your items and overwriting the myFrom.permiso with each new item which means myForm.permiso is always the model of the last item in your items . That is why, when you tab through them, only the last change registers.

You should remove the name attribute of the checkboxes and add a ng-change handler instead of the $watch . And you add a hidden checkbox for the permiso model which you update on change.

https://codepen.io/kuhnroyal/pen/LGrzGv