title: Custom angular2 form input component with two way binding and validation inside a component
body: <p>Is there a way to make a two way binding input component, that can also have a validation inside the component?</p>
  
  <p>What I'm trying to achieve is to have a components that I could line up in my forms as follows:</p>
  
  <pre><code>&lt;form #f="ngForm"&gt;
              &lt;my-form-input [(inputModel)]="name" [inputField]="myFormInputName"&gt;&lt;/my-form-input&gt;
              &lt;my-form-input [(inputModel)]="name2" [inputField]="myFormInputName2"&gt;&lt;/my-form-input&gt;
  ...
              &lt;my-form-input [(inputModel)]="lastItem" [inputField]="lastItemName"&gt;&lt;/my-form-input&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I have a following setup and can't figure out, how to make it right:</p>
  
  <p>The component:</p>
  
  <pre><code>import {Component,Input, Output,EventEmitter} from 'angular2/core'
  import {FORM_DIRECTIVES}    from 'angular2/common';
  
  @Component({
    selector: 'my-form-input',
    directives: [FORM_DIRECTIVES],
    template:
      `
      &lt;input type="text" class="form-control"  id="i1" required [ngModel]="inputModel" (ngModelChange)="onChangeInput($event)" ngControl="ctrl" #ctrl="ngForm"/&gt;
      &lt;p&gt;{{"Is field valid? I would like to make some decisions here depending on that: "+ctrl.valid}}&lt;/p&gt;
  
    `
  })
  export class InputComponent {
  
    constructor(){};
  
    @Input()  inputField:string;
    @Input()  inputModel: Object;
    @Output() inputModelChange = new EventEmitter();
  
    onChangeInput(event){
      this.inputModel=event;
      this.inputModelChange.emit(event);
    }
  }
  </code></pre>
  
  <p>The app:</p>
  
  <pre><code>//our root app component
  import {Component} from 'angular2/core'
  import {FORM_DIRECTIVES}    from 'angular2/common';
  import {InputComponent} from './my.input'
  
  
  @Component({
    selector: 'my-app',
    providers: [],
    template: `
      &lt;div&gt;
        &lt;p&gt;Is there a way to make a custom 2 way binding form input component having also validation?&lt;/p&gt;
        &lt;form #f="ngForm"&gt;
  
          &lt;my-form-input [(inputModel)]="name" [inputField]="myFormInputName"&gt;&lt;/my-form-input&gt;
  
          &lt;p&gt;{{name}}&lt;/p&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    `,
    directives: [InputComponent,FORM_DIRECTIVES]
  })
  export class App {
    constructor() {
      this.name = 'Angular2'
    }
  }
  </code></pre>
  
  <p>I also made a Plunker to ilustrate my problem: <a href="http://plnkr.co/edit/0vXjHbQmv7v7EKQcLWaa?p=preview" rel="noreferrer">http://plnkr.co/edit/0vXjHbQmv7v7EKQcLWaa?p=preview</a></p>