Estou usando o Angular 2 RC3. Estou seguindo principalmente a documentação aqui:https://angular.io/docs/ts/latest/guide/forms.html. Quando chego a "Enviar o formulário com o ngSubmit", as coisas começam a ficar ruins. Se eu adicionar

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

Eu recebo:

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

Se eu remover o atributo #heroForm e adicionar:

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

Em seguida, onSubmit () é chamado várias vezes. Não há várias entradas para o formulário no dom. Por que a aparente duplicação, o que está acontecendo?

Aqui está um componente muito simplificado que obtém o erro "é definido várias vezes":

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

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

Este componente é carregado via

<router-outlet></router-outlet> 

e uma entrada em um arquivo app.routes.ts. Estou usando o roteador versão 3.0.0-alpha.7.

Solução

Eu estava usando as abordagens antiga e nova das formas por acidente. Meu arquivo main.ts estava fazendobootstrap(AppComponent, [provideForms()]) ... em outras palavras, eu esqueci de adicionardisableDeprecatedForms(). Deveria ter sidobootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ])