title: two way binding and validation of drop down list in angular 2
body: <p>I am trying to do two way binding in angular2 with a drop down list.I also want to want to make form is invalid if not any value is selected.
  Below is my code.</p>
  
  <pre><code>&lt;form clas="form-horizontal" (ngSubmit)="submit(frm)" #frm="ngForm"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-sm-2 selectBox" &gt;Type&lt;/label&gt;
          &lt;!--&lt;select class="form-control col-sm-4" name="type" ngModel&gt;
              &lt;option value="select" &gt;Select&lt;/option&gt;
              &lt;option value="Free" &gt;Free&lt;/option&gt;
              &lt;option value="Paid" &gt;Paid&lt;/option&gt;
          &lt;/select&gt;--&gt;
              &lt;select name="type"  class="form-control col-sm-4" [(ngModel)]="selectedValue.value" #selects="ngModel" (change)="selection($event)" required&gt;
                  &lt;option *ngFor="let item of sel" [value]="item.value" [disabled]="item.type=='Select'"&gt;{{item.type}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;div *ngIf="selects.invalid"&gt;
              select your type
          &lt;/div&gt;
      &lt;/div&gt;  
      &lt;div class="form-group"&gt;
          &lt;button class="btn btn-default"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>component file is </p>
  
  <pre><code>import { Component}  from '@angular/core';
  import { colorPreference } from '../colorPreference';
  import {NgForm } from '@angular/forms';
  @Component({
      templateUrl:'./test.html',
      styleUrls:['./test.scss']
  })
  export class testComponent{
      sel=[{type:'Select',value:''},{type:'Free',value:'Free'},{type:'Paid',value:'Paid'}];
      selectedValue=this.sel[0];
      constructor(private colorService:colorPreference)
      {
  
      }
  
      submit(form:NgForm) {
          console.log(form.value);
      }
      selection(event:any) {
          console.log(event.target.value);
              this.selectedValue=null;
              for(var i=0;i&lt;this.sel.length;i++)
              {
                  console.log(this.sel[i].type+" value is "+this.sel[i].value);
                  if(this.sel[i].value==event) {
                      this.selectedValue=this.sel[i];
                  }
              }
      }
  }
  </code></pre>
  
  <p>but when i change the drop down list value it shows an error </p>
  
  <pre><code>test.html:11 ERROR TypeError: Cannot read property 'value' of null
  </code></pre>
  
  <p>can anyone help me to solve this issue?</p>