Question

我正在尝试为ngFormControl构建一个最小的例子，因为我无法让它在我正在编写的新组件中工作，而在旧的组件中，它工作得很好，我找不到区别。这是一个最小的例子，我得到了绑定错误：

import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Control} from "@angular/common";
import { FormsModule }   from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input class="form-control" type="text"  [ngFormControl]="searchInput">
    </div>
  `
})
export class App {
  private searchInput = new Control();
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

此处还有显示问题的Plunkr。根据我的理解，它也可以在不导入FormsModule的情况下工作，因为只有与ngModel的2路绑定才需要FormsModule。这是对的吗？

干杯

Answer 1

这种方式在rc.3中已弃用，您现在应该使用ngModel。

你应该看看这个tutorial。

Answer 2

在Angular 2 Form

的新版本（0.30.0）上不存在

ngFormControl指令

以下更改应解决您的问题：

app.ts

//import FormControl from angular/forms
import { FormsModule, FormControl }   from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms'

@Component({
..
..
//change [ngFormControl] to [formControl]
<input class="form-control" type="text"  [formControl]="searchInput">
..
..

export class App {
//change  new Control(); => new FormControl();
private searchInput = new FormControl();
}

//add ReactiveFormsModule to the @NgModule imports metadata
@NgModule({
      imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
      declarations: [ App ],
      bootstrap: [ App ]
})

Plunkr

ngFormControl没有正确绑定

2 个答案: