Angular 2表格被复制了吗?

李·理查森

我正在使用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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章