最新的angular2表格

我有一個angular2版本去抖輸入控件，如下圖所示。最新的angular2表格

<input type="text" [ngFormControl]="compInput" placeholder="demo input" />

在我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(() => {}); 
    } 
}

這些代碼的工作，直到我我angular2版本升級到最新。看來表單使用已經改變。

我改變[ngFormControl]從到ngControl和控制到FormControl 「@角/形式」，但不工作。

有誰知道我在哪裏錯了新的用法和如何解決？

來源

2016-06-28 Garry

你得到什麼錯誤訊息？ –

沒有錯誤，只是在我輸入輸入控件時不起作用。 – Garry

你確定你「更新」了一切嗎？因爲它應該是來自「@ angular/core」的'Import {Component};' – dfsq

感謝您的幫助，一個簡單的例子。我在我的同事的幫助下找到了我的問題的答案。這裏是。

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);}) 
    } 
}

來源

2016-06-29 01:54:19 Garry

下面是使用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(); 

}

來源

2016-06-28 11:33:11

最新的angular2表格

回答

相關問題