Angular 2 Input Directive Modifying Form Control Value : <p>I have a simple Angular 2 directive that modifies the input value of a textbox. Note that i'm using the Model-Driven form approach.</p>

<pre><code>@Directive({
  selector: '[appUpperCase]'
})
export class UpperCaseDirective{

  constructor(private el: ElementRef, private control : NgControl) {

  }

  @HostListener('input',['$event']) onEvent($event){
    console.log($event);
    let upper = this.el.nativeElement.value.toUpperCase();
    this.control.valueAccessor.writeValue(upper);

  }

}
</code></pre>

<p>The dom updates properly, however the model updates after every other keystroke. Take a look at the <a href="http://plnkr.co/edit/qKM1Fpfwanub3nFoSMTA?p=preview" rel="noreferrer">plnkr</a></p>
