Formulário Angular 2 sendo duplicado?
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çãoEu 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() ])