title: Angular JS /Angular Material .How to validate Checkbox group on click?
body: <p>I am using Angular Material and i am doing a simple validation with checkboxes.</p>
  
  <p><strong>The Problem :</strong></p>
  
  <p>At least One checkbox should be checked.</p>
  
  <p><strong>1</strong>-If i click a checkbox and then i click again,the "required message" is not shown.</p>
  
  <p><strong>2</strong>-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.</p>
  
  <p>I want that ,condition number 1 occurs too,<strong>and one more thing</strong> ,i dont want to show the "required" message when the application loads. Here is my example : <a href="https://codepen.io/anon/pen/zrjjyL" rel="nofollow">https://codepen.io/anon/pen/zrjjyL</a></p>
  
  <p>I Hope you can give me a hand,Thanks!!!!!</p>
  
  <p>Code :</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;form name="myForm" ng-app="myApp" ng-controller="myController"  
   class="container-fluid" ng-submit="submit()"&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-xs-8"&gt;
     &lt;md-input-container md-no-float&gt;
             &lt;label&gt;Name *&lt;/label&gt;
             &lt;input required="" name="nombre" ng-model="model.nombre"&gt;
             &lt;div ng-messages="myForm.nombre.$error" ng-
  show="myForm.nombre.$touched || myForm.$submitted"&gt;
                &lt;div ng-message="required"&gt;Required.&lt;/div&gt;
             &lt;/div&gt;
          &lt;/md-input-container&gt;
    &lt;md-input-container md-no-float&gt;
             &lt;label&gt;Search Options *&lt;/label&gt;
             &lt;input type="text" id="query" ng-model="query"/&gt;
          &lt;/md-input-container&gt;
     &lt;md-input-container md-no-float&gt;
  
  
          &lt;md-list-item ng-repeat="item in items | filter:query"&gt;
              &lt;p style ="font-size: 1.3rem;font-family: Roboto,'Helvetica 
  Neue',sans-serif"&gt; {{ item.title }} &lt;/p&gt;
  
                 &lt;md-checkbox name ="permiso" ng-
  model="model.opciones[item.id]['checked']" ng-required="!isChecked" &gt;&lt;/md-
  checkbox&gt;
          &lt;/md-list-item&gt;
  
   &lt;div ng-messages="myForm.permiso.$error" ng-show=" myForm.permiso.$touched  
   || myForm.$submitted"&gt;
               &lt;div ng-message="required"&gt;Required.&lt;/div&gt;
  
          &lt;/md-input-container&gt;
  
  
  &lt;/div&gt; &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS:</p>
  
  <pre><code>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);
  });
  </code></pre>