Angular 2表格被复制了吗? [英] Angular 2 Form Getting Duplicated?

问题描述

我正在使用Angular 2 RC3.我主要在这里关注文档: https://angular.io/docs/ts/latest/guide/forms.html .当我进入使用ngSubmit提交表单"时，事情开始变得很糟糕.如果我添加

I'm using Angular 2 RC3. I'm mostly following the documentation here: https://angular.io/docs/ts/latest/guide/forms.html. When I get to "Submit the form with ngSubmit" things start to go poorly. If I add

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">

我得到:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Reference "#heroForm" is defined several times.  

如果我删除#heroForm属性并添加:

If I remove the #heroForm attribute and add:

<button type="submit" class="btn btn-default" ...

然后onSubmit()被多次调用. dom中的表单没有多个条目.为什么出现明显的重复，这是怎么回事?

Then onSubmit() gets called multiple times. There aren't multiple entries for the form in the dom. Why the apparent duplication, what's going on?

这是一个非常简化的组件，它收到多次定义"错误:

Here's a very simplified component that gets the "is defined several times" error:

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.

and an entry in an app.routes.ts file. I'm using Router version 3.0.0-alpha.7.

我偶然使用了旧的和新的表格方法.我的main.ts文件正在执行bootstrap(AppComponent, [provideForms()]) ...换句话说，我忘了在disableDeprecatedForms()中添加.应该是bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ])

I was using both the old and the new forms approaches by accident. My main.ts file was doing bootstrap(AppComponent, [provideForms()]) ... in other words I forgot to add in disableDeprecatedForms(). It should have been bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ])

推荐答案

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

You should check if in your form-templates you have #heroForm tag defined only once. The method onSubmit() should be defined in your component class and needs to be linked to the form in use (using ngSubmit).

如果您添加了组件代码(包括导入的库)，将更容易找出错误的出处.

If you add your components code (including the imported libs) will be easier to figure out from where you get that error.

但是，我怀疑您尝试使用旧的表单机制.我建议您尝试使用新方法，因为它完全不同.不幸的是，文档仍在开发中，提供的一些示例使用的是旧方法.

But, I suspect you try to use the old forms mechanism. I would suggest you try to use the new approach as is quite different. Unfortunately the documentation is still work in progress and some of the examples provided are using the old approach.

在Angular2中，您可以通过3种方式配置表单:

In Angular2 you have 3 ways to configure forms:

1)模板驱动

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

2) model-driven or reactive approach using low level APIs

3)由模型驱动，但具有更高级别的API(FormBuilder)

3) model-driven but with a higher level API (FormBuilder)

这里有2条非常有用的博客文章:

Here are 2 very useful blog-posts for this:

• http://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html
• http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

• http://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html
• http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

这篇关于Angular 2表格被复制了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！