Question

我有一个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版本升级到最新版本。表格形式似乎已经改变。

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

有谁知道我对新用法的错误以及如何修复？

Answer 1

以下是使用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

感谢您的帮助。在我的同事的帮助下，我找到了我的问题的答案。在这里。

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

最新的angular2形式

2 个答案: