title: Angular 5 checkbox validation in ngFor loop
body: <p>I am using angular 5 and in the html file i need to validate a checkbox to make sure user checks atleast one box. I am able to get an error but not in the way I require. Currently with the below code I am getting an error message after every checkbox option, but I require just one message after all the boxes.</p>
  
  <pre><code>&lt;div class="form-group"&gt;
  
     &lt;label for="options"&gt;Categories:&lt;/label&gt;
  
       &lt;label class = "control-label"&gt;
  
         &lt;div *ngFor="let category of initialCategories"&gt;
  
           &lt;input class = "form-control" type="checkbox" 
                 name="categories" #categories="ngModel" value=" 
                 {{category.name}}" [(ngModel)]="category.checked" 
                 required/&gt; {{category.name}}
  
                 &lt;div [hidden]="categories.valid || categories.pristine 
                 ||!categories.dirty"&gt;
                      Please select at least one option.  
                  &lt;/div&gt;
  
         &lt;/div&gt;
  
        &lt;/label&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>If I put the <code>div</code> to show error outside the <code>ngFor div</code> then it will show not found error since its outside the loop.</p>