Angular 2-Formular wird dupliziert?

Ich benutze Angular 2 RC3. Ich verfolge hauptsächlich die Dokumentation hier:https: //angular.io/docs/ts/latest/guide/forms.htm. Wenn ich das Formular mit ngSubmit abschicke, laufen die Dinge schlecht. Wenn ich @ hinzufü

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

Ich bekomme

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

Wenn ich das Attribut #heroForm entferne und Folgendes hinzufüge:

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

Then onSubmit () wird mehrmals aufgerufen. Es gibt nicht mehrere Einträge für das Formular in der Dom. Warum die scheinbare Vervielfältigung, was ist los?

Hier ist eine sehr vereinfachte Komponente, die den Fehler "Wird mehrmals definiert" erhält:

import {Component } from '@angular/core';

@Component({
    template: '<form #heroForm="ngForm"></form>'
})
export class Server {
}

Diese Komponente wird über @ gelad

<router-outlet></router-outlet> 

und ein Eintrag in einer Datei app.routes.ts. Ich verwende die Router-Version 3.0.0-alpha.7.

Lösun

Ich habe aus Versehen sowohl den alten als auch den neuen Formularansatz verwendet. Meine main.ts-Datei hatbootstrap(AppComponent, [provideForms()]) ... mit anderen Worten, ich habe vergessen, @ hinzuzufügdisableDeprecatedForms(). Es hätte sein sollenbootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ])

Antworten auf die Frage(8)

Ihre Antwort auf die Frage