@angular/forms 0.3.0 中的 ngFormControl 有什么变化吗?
Did anything change to ngFormControl in @angular/forms 0.3.0?
我正在将我的 Angular 应用程序从 rc4 升级到 rc5,包括将 angular 表单从 0.2.0 更新到 0.3.0。
从那以后我一直收到以下错误,这似乎与 0.3.0
中对 ngFormControl 的更改有关
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngFormControl' since it isn't a known property of 'input'. ("nput type="text" class="form-control search-input" name="search" placeholder="Search..." [value]="" [ERROR ->][ngFormControl]="searchFormControl">
在我的组件模板之一中引用的行代码是一个搜索框:
<p [hidden]=hideSearch>
<input type="text" class="form-control search-input" name="search" placeholder="Search..." [value]="" [ngFormControl]="searchFormControl">
</p>
我找不到有关此功能已更改的任何信息。那么现在 ngFormControl 的合适替代品是什么?
编辑:对于上下文,这是整个组件 header.component.ts(FormModule 和 ReactiveFormModule 在 app.module.ts 中加载)
import { Component, EventEmitter, Input, Output} from '@angular/core';
import { Control } from '@angular/common';
import { OrbitService } from './orbit.service';
import 'rxjs/add/operator/debounceTime';
@Component({
selector: 'orbit-header',
template: `
<div class="top-nav row">
<h3 class="pull-left">Northmark</h3>
<div class="col-md-2 col-md-offset10 pull-right">
<p [hidden]=hideSearch>
<!-- ng-model = [ngFormController] -->
<input type="search" class="form-control search-input" name="search" placeholder="Search..." [value]="" [NgFormControl]="searchFormControl">
</p>
<p>
<a class="log-out" (click)="orbitService.deleteCookie('ORBIT_COOKIE')">Log Out</a>
</p>
</div>
<div class="clearfix"></div>
</div>
`
})
export class HeaderComponent implements OnInit {
@Input() private hideSearch: boolean;
constructor(
private orbitService: OrbitService) {
this.searchFormControl = new Control();
}
@Output() onSubmit = new EventEmitter<string>();
ngOnInit() {
this.searchFormControl.valueChanges
.debounceTime(500)
.subscribe(query => this.submit(query));
}
submit(query: string) {
this.onSubmit.emit(query);
}
}
[ngFormControl]="searchFormControl"
应该是
[formControl]="searchFormControl"
而且我认为您需要导入 ReactiveFormsModule
我正在将我的 Angular 应用程序从 rc4 升级到 rc5,包括将 angular 表单从 0.2.0 更新到 0.3.0。 从那以后我一直收到以下错误,这似乎与 0.3.0
中对 ngFormControl 的更改有关zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngFormControl' since it isn't a known property of 'input'. ("nput type="text" class="form-control search-input" name="search" placeholder="Search..." [value]="" [ERROR ->][ngFormControl]="searchFormControl">
在我的组件模板之一中引用的行代码是一个搜索框:
<p [hidden]=hideSearch>
<input type="text" class="form-control search-input" name="search" placeholder="Search..." [value]="" [ngFormControl]="searchFormControl">
</p>
我找不到有关此功能已更改的任何信息。那么现在 ngFormControl 的合适替代品是什么?
编辑:对于上下文,这是整个组件 header.component.ts(FormModule 和 ReactiveFormModule 在 app.module.ts 中加载)
import { Component, EventEmitter, Input, Output} from '@angular/core';
import { Control } from '@angular/common';
import { OrbitService } from './orbit.service';
import 'rxjs/add/operator/debounceTime';
@Component({
selector: 'orbit-header',
template: `
<div class="top-nav row">
<h3 class="pull-left">Northmark</h3>
<div class="col-md-2 col-md-offset10 pull-right">
<p [hidden]=hideSearch>
<!-- ng-model = [ngFormController] -->
<input type="search" class="form-control search-input" name="search" placeholder="Search..." [value]="" [NgFormControl]="searchFormControl">
</p>
<p>
<a class="log-out" (click)="orbitService.deleteCookie('ORBIT_COOKIE')">Log Out</a>
</p>
</div>
<div class="clearfix"></div>
</div>
`
})
export class HeaderComponent implements OnInit {
@Input() private hideSearch: boolean;
constructor(
private orbitService: OrbitService) {
this.searchFormControl = new Control();
}
@Output() onSubmit = new EventEmitter<string>();
ngOnInit() {
this.searchFormControl.valueChanges
.debounceTime(500)
.subscribe(query => this.submit(query));
}
submit(query: string) {
this.onSubmit.emit(query);
}
}
[ngFormControl]="searchFormControl"
应该是
[formControl]="searchFormControl"
而且我认为您需要导入 ReactiveFormsModule