Gostaria de saber a diferença entre esses dois eventos em angular. Os dois funcionam, os dois não recarregam a página...
Mas qual a diferença?
Gostaria de saber a diferença entre esses dois eventos em angular. Os dois funcionam, os dois não recarregam a página...
Mas qual a diferença?
Boa noite, Júlio! Como vai?
A diferença é que com o submit havia a necessidade de fazer event.preventDefault()
para prevenir o recarregamento da página enquanto o ngSubmit já fazia esse tratamento por baixo dos panos, deixando o programador focar na lógica de negócio.
Mas pode ser que o pessoal do Angular tenha mudado isso na última versão do framework.
Qual a versão que vc está utilizando? Daí eu dou uma olhada nisso pra vc e verifico se realmente houve essa mudança ou se a diferença que citei ainda continua!
Boa noite, professor! A versão que eu uso é a 6.
No curso de Angular, o professor Flávio usa o (submit), na documentação do Angular, eles usam o (ngSubmit).
Valeu!
Opa, Júlio! Tudo certo?
Então, dei uma olhada no curso para poder te explicar numa boa o que acontece. Segue aí a explicação!
Há 3 formas de trabalhar com formulários em Angular. Utilizando o FormsModule
(que dá a possibilidade de utilizar o ngSubmit
dentre outras coisas), utilizando o ReactiveFormsModule
(que possibilita a criação de formulários reativos) e não utilizando nenhum desses dois caras (que equivale a trabalhar com um formulário padrão do HTML).
Se o caso for o 3º, então não haverá possibilidade de utilizar o ngSubmit
, uma vez que esse só é disponibilizado através dos módulos FormsModule
ou ReactiveFormsModule
. Portanto, teremos que utilizar o submit
e, nesse caso, ao submeter o formulário a página será recarregada.
Por outro lado, caso estejamos utilizando o FormsModule
ou ReactiveFormsModule
, o ngSubmit
passa a estar habilitado para uso e ao submeter o formulário a página não é recarregada. Uma curiosidade intrigante a ser observada é que também nesse caso é possível utilizar o submit
e obter o mesmo comportamento. A documentação do Angular não é clara quanto ao motivo disso, mas eu imagino que seja para facilitar na hora de migrar um formulário que não utilize nenhum dos módulos de formulário do Angular e onde se deseja passar a utilizar algum desses módulos. Contudo, a boa prática é sempre utilizar o ngSubmit
quando estiver utilizando o FormsModule
ou o ReactiveFormsModule
.
Pegou a ideia, Júlio? Qualquer coisa é só falar!
Obs.: A título de exemplificação prática do que eu falei, eu fiz esse código onde é possível ver o funcionamento dos formulários em Angular. Respectivamente chamados de Formulário Padrão (sem utilizar nenhum módulo de formulário do Angular), Formulário Template (utilizando apenas o FormsModule
) e Formulário Reativo (utilizando o ReactiveFormsModule
). Caso queira modificar o código como quiser alternando entre o submit
e o ngSubmit
para ver na prática o que foi dito aqui, faça um fork antes.
Grande abraço e bons estudos, meu aluno!