我正在使用Angular 2 RC3。我主要在这里关注文档:https : //angular.io/docs/ts/latest/guide/forms.html。当我进入“使用ngSubmit提交表单”时,事情开始变得很糟糕。如果我加
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
我得到:
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Reference "#heroForm" is defined several times.
如果删除#heroForm属性并添加:
<button type="submit" class="btn btn-default" ...
然后onSubmit()被多次调用。dom中的表单没有多个条目。为什么出现明显的重复,这是怎么回事?
这是一个非常简化的组件,它收到“多次定义”错误:
import {Component } from '@angular/core';
@Component({
template: '<form #heroForm="ngForm"></form>'
})
export class Server {
}
该组件是通过以下方式加载的
<router-outlet></router-outlet>
以及一个app.routes.ts文件中的条目。我正在使用路由器版本3.0.0-alpha.7。
我偶然使用了旧的和新的表格方法。我的main.ts文件正在执行bootstrap(AppComponent, [provideForms()])
...换句话说,我忘记添加disableDeprecatedForms()
。应该是bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ])
您应该检查在表单模板中是否只定义了一次#heroForm标记。方法onSubmit()应该在您的组件类中定义,并且需要链接到正在使用的表单(使用ngSubmit)。
如果您添加了组件代码(包括导入的库),将更容易从哪里发现该错误。
但是,我怀疑您尝试使用旧的表单机制。我建议您尝试使用新方法,因为它完全不同。不幸的是,文档仍在开发中,提供的一些示例使用的是旧方法。
在Angular2中,您可以通过3种方式配置表单:
1)模板驱动
2)使用低级API的模型驱动或反应式方法
3)模型驱动,但具有更高级别的API(FormBuilder)
这里有两个非常有用的博客文章:
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句