Forms 最新angular2表格

我有一个angular2版本的debounce输入控件，模板如下

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

这些代码在我将angular2版本升级到最新版本之前一直有效。 看起来形式的用法已经改变了

我将[ngFormControl]从“@angular/forms”更改为ngControl，并将Control更改为FormControl，但不起作用

---

有人知道我在新用法和如何修复方面的错误吗？

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

}

从'@angular/core'导入{Component，Input，Output，HostListener，EventEmitter，ChangeDetectionStrategy}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Subject'导入{Subject}；
@组成部分({
moduleId:module.id，
选择器：“用户搜索”，
changeDetection:ChangeDetectionStrategy.OnPush，
模板：`
`
})
导出类UserSearchComponent{
输入：字符串；
keyup$=新主题（）；
@HostListener（'窗口：键控'，['$event']））
取消搜索（事件）{
如果（event.code==='Escape'）{
this.input=未定义；
this.keyup$.next（未定义）；
}
}
@Output（）搜索：Observable=this.keyup$
.debounceTime（700）
.distinctUntilChanged（）；
}

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

}

从'@angular/core'导入{Component，Input，Output，HostListener，EventEmitter，ChangeDetectionStrategy}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Subject'导入{Subject}；
@组成部分({
moduleId:module.id，
选择器：“用户搜索”，
changeDetection:ChangeDetectionStrategy.OnPush，
模板：`
`
})
导出类UserSearchComponent{
输入：字符串；
keyup$=新主题（）；
@HostListener（'窗口：键控'，['$event']））
取消搜索（事件）{
如果（event.code==='Escape'）{
this.input=未定义；
this.keyup$.next（未定义）；
}
}
@Output（）搜索：Observable=this.keyup$
.debounceTime（700）
.distinctUntilChanged（）；
}
谢谢你的帮助。在同事的帮助下，我找到了问题的答案。给你

template.html

<form #form="ngForm">
  <input name="nameInput" [(ngModel)]="componentName" #nameInput="ngModel">
</form>

谢谢你的帮助。在同事的帮助下，我找到了问题的答案。给你

template.html

<form #form="ngForm">
  <input name="nameInput" [(ngModel)]="componentName" #nameInput="ngModel">
</form>

您收到了什么错误消息？没有错误，只是当我输入输入控件时无法工作。您确定“更新”了所有内容吗？因为它应该是从“@angular/core”导入{Component}”和
控件
来自
@angular/form
请同时添加初始化新表单（引导）的方式。您会收到什么错误消息？没有错误，只是在输入控件时无法工作。您确定“更新”了所有内容吗？因为它应该是从“@angular/core”导入{Component}”和
控件
来自
@angular/form
请添加初始化新表单的方式（引导）。