title: Angular2 Forms :Validations, ngControl, ngModel etc
body: <p>Working on angular2 beta <code>Forms</code>. after alot of searching found nothing useful. hope here somebody help me.</p>
  
  <p>Basically i am bit confused how to use forms in angular2 in a proper manner (i.e using ngControl, ngFormControl etc). i have created one plnkr here</p>
  
  <blockquote>
    <p><a href="http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview" rel="noreferrer">http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview</a></p>
  </blockquote>
  
  <p>here is my .html code:-</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup"&gt;
  
    &lt;div class="col-md-7"&gt;
  Name: &lt;input type="text" id="name" placeholder="Name" class="form-control" ngControl="name"&gt;
    &lt;/div&gt;
    &lt;div class="col-md-7"&gt;
    Password:   &lt;input type="text" id="password" placeholder="password" class="form-control" ngControl="password"&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-7"&gt;
      &lt;input type="radio" name='type'&gt;Btech
      &lt;input type="radio" name='type'&gt;Mtech
    &lt;/div&gt;
  
    &lt;div class="col-md-7"&gt;
      &lt;input type="checkbox" &gt;Math
      &lt;input type="checkbox"&gt;English
      &lt;input type="checkbox"&gt;Science
    &lt;/div&gt;
    &lt;br&gt;
    &lt;div class="col-md-7"&gt;
      &lt;select #selectOption (change)='getValue(selectOption.value)' class='form-control'&gt;
        &lt;option value='1'&gt;One Value&lt;/option&gt;
        &lt;option value='2'&gt;two Value&lt;/option&gt;
        &lt;option value='3'&gt;Three Value&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;button type="button" (click)="addNewGroup(CreateGroup.value)" class="btn btn-primary btn-lg"&gt; Create &lt;/button&gt;
  </code></pre>
  
  <p>and .ts code is here:- </p>
  
  <pre class="lang-ts prettyprint-override"><code>CreateGroup: FormBuilder;
    constructor(fb: FormBuilder){
      console.log('form called');
  
      this.CreateGroup = fb.group({
              'name': new Control(),
              'password': new Control()
          })
    }
    addNewGroup(value) {
      console.log(value);
      document.getElementById("myForm").reset();
    }
  
    getValue(value){
      console.log(value);
    }
  </code></pre>
  
  <p>i am unable to understand how to get values as object from complete form. my form include textboxes,checkboxes,radio and select options. now here are few of my questions.</p>
  
  <p>Q1:- How to get values of radio,checkbox,select using form in angular2. (i dont want to call <code>change</code> hook for select option as i have used in the plnkr).</p>
  
  <p>Q2:- as in the plnkr after submitting data form control has not been reset. Control of the form remains present but form seems reset. so how to reset the control of forms in angular2.</p>
  
  <p>Q3:- whats the best method to use validation in the forms (if anyone have plnkr showing validation please post it).</p>
  
  <p>i had read this article on forms but still not succesfull with radio checkboxes and select options.</p>
  
  <p><a href="http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2" rel="noreferrer">http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2</a></p>