title: How to modify input values in directives with model driven / reactive forms
body: <p>I want to implement a "TrimDirective", which deletes leading and trailing spaces from input fields, with Angular 2 RC 5 and model driven / reactive forms.</p>
  
  <p>I managed to change the value of the input field, however I don't get a new value in the component in <code>myForm.valueChanges()</code>.</p>
  
  <p>See this plunker: <a href="http://plnkr.co/edit/ruzqCh?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/ruzqCh?p=preview</a></p>
  
  <p>How can I trigger a update of the formGroup when the directive changes the value?</p>
  
  <p><strong>template</strong>:</p>
  
  <pre><code>&lt;form [formGroup]="myForm"&gt;
    &lt;input formControlName="name" trim&gt;
  &lt;/form&gt;
  latest value: -{{ latestValue }}-
  </code></pre>
  
  <p><strong>component</strong>:</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    templateUrl: 'app/app.html'
  })
  export class AppComponent implements OnInit {
  
    private myForm: FormGroup;
    private latestValue: string;
  
    ngOnInit() {
      this.myForm = new FormGroup({
        name: new FormControl(),
      });
      this.myForm.valueChanges.subscribe(v =&gt; this.latestValue = v.name)
    }
  }
  </code></pre>
  
  <p><strong>directive</strong>:</p>
  
  <pre><code>@Directive({
      selector: '[trim]'
  })
  
  export class TrimDirective {
  
      private el: any;
  
      constructor(
          el: ElementRef
      ){
          this.el = el.nativeElement;
      }
  
      @HostListener('keypress')
      onEvent() {
          setTimeout(() =&gt; { // get new input value in next event loop!
              let value: string = this.el.value;
              if(value &amp;&amp; (value.startsWith(' ') || value.endsWith(' '))) {
                  console.log('trim!');
                  this.el.value = value.trim();
              }
          },0);
      }
  }
  </code></pre>