Angular › Forms

How do you prevent a form from reloading the page when it is submitted in Angular?

Beginner

Answer

You bind to the form's ngSubmit event instead of the native submit event, and Angular automatically prevents the default page reload behavior for you, letting your component's own method handle the submission logic instead.

<form (ngSubmit)="onSubmit()">
  <input name="email" ngModel />
  <button type="submit">Submit</button>
</form>

onSubmit() {
  console.log('Form submitted without reloading the page');
}

Real-world example A contact form smoothly shows a thank you message after submission, without the jarring full page reload that would normally happen, thanks to Angular's ngSubmit event handling this automatically.

Common follow-ups: What happens if you accidentally bind to the native submit event instead of ngSubmit?;Is there a difference in behavior between a button with type submit and one with type button inside a form?

Data Binding;Components & Templates