Custom angular2 form input component with two way binding and validation inside a component
<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>