使用angular2 RC2的模型驱动表单
使用angular2 RC2的模型驱动表单
提问于 2016-06-18 05:34:27
在更新到新的angular2 RC2之后，我尝试按照我在网上找到的文档重新创建一个模型驱动的表单，以下是代码
COMPONENT.ts
import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms';
myForm = new FormGroup({
name: new FormGroup({
first: new FormControl(),
last: new FormControl()
})
});这是HTML代码
<form formGroup="myForm" >
<div formGroupName="name">
<input formControlName ="first" >
<input formControlName ="last" >
</div>
</form>但是在运行时，我得到了这个错误，
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
No provider for NgControl ("
<form formGroup="myForm" >
<div formGroupName="name">
[ERROR ->]<input formControlName ="first" >
<input formControlName ="last" >
</div>
"): ProductComponent@9:5有没有人知道是什么导致了这个错误。
附注:新的模板驱动的表单可以工作，但不是模型驱动的
附注:我正在使用mgechev的Angular2-seed项目
回答 2
Stack Overflow用户
发布于 2016-06-18 14:44:32
在更新到rc2后，我也遇到了同样的错误。在main.ts中，我更改了这一行
import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
至
import { disableDeprecatedForms, provideForms } from '@angular/forms';
Stack Overflow用户
发布于 2016-06-18 21:57:22
以下内容可能会有所帮助：
将新表单添加到packages.json文件。
"@angular/forms": "0.1.0",禁用已弃用的表单并在主文件中启用新表单：
import {bootstrap} from '@angular/platform-browser-dynamic';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {App} from './app';
bootstrap(App, [
disableDeprecatedForms(),
provideForms()
])
.catch(err => console.error(err));您的应用程序组件从新表单导入指令(FormControl、FormArray、FormGroup、REACTIVE_FORM_DIRECTIVES)。请注意，ngFormModel现在是formGroup，ngControl现在是formControlName。
import {Component} from '@angular/core'
import { FormControl, FormArray, FormGroup, REACTIVE_FORM_DIRECTIVES, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<form [formGroup]="form">
<input [formControlName]="first">
<input [formControlName]="last">
</form>
</div>
`,
directives: [REACTIVE_FORM_DIRECTIVES]
})
export class App {
public form: FormGroup;
constructor(
private fb: FormBuilder
) {
this.form = fb.group({
first: ["", Validators.required],
last: ["", Validators.required]
});
}
}我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37890683
复制相关文章
相似问题
腾讯云开发者
