Question

我正在使用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() ])

Answer 1

您应该检查表单模板中是否只定义了#heroForm标记一次。 onSubmit（）方法应该在组件类中定义，并且需要链接到正在使用的表单（使用ngSubmit）。

如果添加组件代码（包括导入的库），将更容易弄清楚从哪里得到错误。

但是，我怀疑你尝试使用旧的表单机制。我建议你尝试使用新的方法，因为它是完全不同的。遗憾的是，文档仍在进行中，并且提供的一些示例使用的是旧方法。

在Angular2中，您有3种配置表单的方法：

1）模板驱动

2）使用低级API的模型驱动或反应式方法

3）模型驱动但具有更高级别的API（FormBuilder）

以下是2篇非常有用的博客文章：

Answer 2

我遇到了同样的问题，但与第一张海报不同的是disableDeprecatedForms()。由于我正在转换现有的旧表单，在我的情况下，我的component.ts文件具有旧的

import {FORM_DIRECTIVES} from '@angular/common';

和...

directives: [FORM_DIRECTIVES]

用NgForm修复我的问题取代这些内容。

Answer 3

您可以使用(submit)代替(ngSubmit)

Answer 4

尝试了所有内容，唯一对我有用的是更改<button>的{{1}}。

Angular 2表格是否重复？

解决方案

4 个答案: