Latest angular2 form - forms

Question

I have a angular2 version debounce input control, template like below.
<input type="text" [ngFormControl]="compInput" placeholder="demo input" />
In my component.ts
import {Component} from "angular2/core";
import {Control} from "angular2/common";
#Component({
...
)
export class Demo{
private compInput = new Control();
constructor(){
this.compInput.valueChanges.subscribe(() => {});
}
}
these code works until I upgrade my angular2 version to latest.
It seems form usage has changed.
I changed [ngFormControl] to ngControl and Control to FormControl from "#angular/forms", but doesn't work.
Does anyone know where I am wrong about the new usage and how to fix?

Answer 1

Here's a simple example using ngModel
import {Component, Input, Output, HostListener, EventEmitter, ChangeDetectionStrategy} from '#angular/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
#Component({
moduleId: module.id,
selector: 'user-search',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<form role="search">
<div class="form-group">
<input
class="form-control"
name="input"
type="text"
placeholder="Search user"
[(ngModel)]="input"
(keyup)="keyup$.next($event.target.value)"
/>
</div>
</form>
`
})
export class UserSearchComponent {
input: string;
keyup$ = new Subject<string>();
#HostListener('window:keyup', ['$event'])
cancelSearch(event) {
if (event.code === 'Escape') {
this.input = undefined;
this.keyup$.next(undefined);
}
}
#Output() search: Observable<string> = this.keyup$
.debounceTime(700)
.distinctUntilChanged();
}

Answer 2

Thanks for all your help. I have find the answer for my question with help of my colleague. Here it is.
template.html
<form #form="ngForm">
<input name="nameInput" [(ngModel)]="componentName" #nameInput="ngModel">
</form>
component.ts
import {Component, ViewChild} from "#angular/core";
import {NgModel} from "#angular/common";
#Component({...})
export class Demo{
#ViewChild('nameInput') nameInput:NgModel;
componentName:string;
ngAfterViewInit(){
this.nameInput.update //or this.nameInput.control.valueChanges
.subscribe((val:any) => {console.log("value update", val);})
}
}