最新的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表格

回答

相关问题