iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Angular, connect submission logic to the <form> element with (ngSubmit), then use a button with type="submit". In the component handler, check the form’s validity and state before passing its value to your application logic. Reactive and template-driven forms use this pattern; Signal Forms provide a separate managed submission lifecycle.
Submit a reactive form with (ngSubmit)
Reactive forms keep an explicit form model in the component. Bind a FormGroup to the form, attach the submit handler to the form itself, and provide a submit-type button. Angular documents that this also supports submitting by pressing Enter.
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<label>
Name
<input formControlName="name">
</label>
<button type="submit">Save</button>
</form>In the component, define the group and handle its current value:
profileForm = new FormGroup({
name: new FormControl('', Validators.required),
});
onSubmit() {
if (this.profileForm.invalid) {
return;
}
const value = this.profileForm.value;
// Pass value to the application's next step.
}Import the reactive forms directives used by the component. Add validators to the form model and show validation feedback where it helps people correct their input. Angular’s validator functions return validation errors or null; asynchronous validators run only after synchronous validators pass. See the Angular reactive forms guide and form validation guide.
#1 Best Overall
Submit a template-driven form
Template-driven forms define more of their structure in the template. Import FormsModule; Angular then applies NgForm to form elements by default. Its ngSubmit event can call a component method, while child controls register through NgModel and a name attribute.
<form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm.value)">
<label>
Email
<input name="email" ngModel required email>
</label>
<button type="submit">Send</button>
</form>The form directive tracks aggregate value and validation status. The handler can receive the form value, then apply the checks and application logic appropriate to the form. Angular’s template-driven forms guide demonstrates handling submission with a component method.
Choose the form approach that fits the work
Angular describes the approaches as different trade-offs, not as a universal performance ranking.
Free tools Windows power users keep installed
One-click scans. No signup required.
| Consideration | Reactive forms | Template-driven forms |
|---|---|---|
| Where the model is defined | Explicitly in the component | Primarily in the template |
| Data flow | Synchronous | More abstract and asynchronous |
| Validation | Validators are set on the form model | Validation is expressed through template directives |
| Testing and scale | Angular characterizes them as easier to test with less setup and more scalable | Angular positions them for simpler scenarios |
For complex forms, reusable controls, or cases where direct model access and testability matter, reactive forms offer explicit state. For simpler forms where a template-centered abstraction is convenient, template-driven forms may be sufficient. These distinctions follow Angular’s forms overview.
Rank #3
Where Signal Forms fit
Signal Forms use a managed submission lifecycle rather than the reactive-form (ngSubmit) example. The guide describes FormRoot as setting novalidate, preventing the browser’s default navigation, and calling submit() when the form is submitted. The submission process marks interactive fields touched, checks validation, invokes the action when valid, and handles action results or returned errors. See the Signal Forms submission guide.
What the submit handler does—and does not do
Handling a form’s submit event connects a user action to your code; it does not itself send data to a server or guarantee persistence. Your application must implement any transport, server-side error handling, security checks, and storage. Keep the handler on the form rather than wiring only a button click, so submission remains associated with the form and its standard submit behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
