title: Checkbox Group handling and Validation in Angular2
body: <p>I don't get, how checkbox groups should be handled in a model driven form in angular2.</p>
  
  <p>The model has a property <code>languages</code> which I instantiate like this:</p>
  
  <pre><code>this.model = {
    languages: []
  };
  </code></pre>
  
  <p>Using <code>FormBuilder</code> to create the form:</p>
  
  <pre><code>this.modelForm = this.formBuilder.group({
    'languages': [model.languages, Validators.required],
  });
  </code></pre>
  
  <p>And the template:</p>
  
  <pre><code>&lt;div *ngFor="let language of translateService.get('languages') | async | key_value"&gt;
    &lt;input type="checkbox" name="languages[]" formControlName="languages" value="{{ language.key }}" id="language_{{ language.key }}"&gt;
    &lt;label attr.for="language_{{ language.key }}"&gt;{{ language.value }}&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>div</code> is needed for styling purposes (custom checkbox), <code>key_value</code> makes keys and values of the language available in the loop, obviously.</p>
  
  <p>The first problem comes with validation. If one checks and unchecks a checkbox (and no other checkbox is checked), the input is still valid - somehow strange.</p>
  
  <p>The second problem comes with the value, which is <code>true</code> if two ore more languages are checked and <code>false</code> otherwise.</p>
  
  <p>Then there is a third problem with the initial value of <code>languages</code> which is just an empty array, but causes all checkboxes to be checked initially (doesn't happen if the initial value is set to a <code>string</code>), although I can not spot any <code>checked</code> attribute in the DOM.</p>
  
  <p>I'm working with the latest ionic beta (2.0.0-beta.10) which uses angular/core version 2.0.0-rc.4 and angular/forms version 0.2.0.</p>
  
  <p>So, is there any guide on how to work with checkbox groups? Any advice or ideas?</p>