title: Angular2 - reset the value of a select after user changes it
body: <p>I have a <code>&lt;select&gt;</code> which the user can change. Initially it has a value and when the user changes it I must prompt her <code>"are you sure"?</code> and in case the answer is NO then change back the <code>&lt;select&gt;</code>'s selected value to the previous one. The <code>&lt;select&gt;</code> is bound to a collection of objects, not values.</p>
  
  <p>The best I could come up with so far is this:</p>
  
  <ul>
  <li>in the html</li>
  </ul>
  
  
  
  <pre><code>&lt;select [ngModel]="selectedObj" (ngModelChange)="onSelectedObjChanged($event)"&gt;
      &lt;option *ngFor="let obj of availableObjs" [ngValue]="obj"&gt;{{whatever}}&lt;option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <ul>
  <li>in the code</li>
  </ul>
  
  
  
  <pre><code>onSelectedObjChanged(obj) {
    if (prompt answer is no) {
       let currentlySelectedObj = this.selectedObj;
       this.selectedObj = null;
       this.changeDetectorRef.detectChanges();
       this.selectedObj = currentlySelectedObj;
       this.changeDetectorRef.detectChanges();
    }
  }
  </code></pre>
  
  <p>This works, but is ugly. Why do I do it:</p>
  
  <ul>
  <li>there seems to be no way to cancel the selection changed event in the DOM</li>
  <li>when <code>onSelectedObjChanged</code> is called and the answer is "no", I need to somehow let angular know it has to refresh the binding target, i.e. the <code>&lt;select&gt;</code>...</li>
  <li>...however I can't simply set <code>this.selectedObj = this.selectedObj</code> as the value doesn't change and there no change detected by angular; that's why I set it to <code>null</code> and back...</li>
  <li>...however even that is not enough, I need to invoke <code>changeDetectorRef.detectChanges()</code> to notify angular of it</li>
  </ul>
  
  <p>I'm sure there is a better and easier way to do this, it would be great if you could share some ideas. </p>
  
  <p>Thanks!</p>