Diferença entre os eventos (submit) e (ngSubmit) ANGULAR

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!