How to submit form data in Angular

In Angular, submitting form data involves two key directives: ngModel for two-way data binding and ngSubmit to handle form submission events. These directives allow seamless data binding between form inputs and component properties, ensuring an efficient and reactive way to handle user input and form submission.

Key takeaways:

  • ngModel enables two-way data binding between the form inputs and the component, allowing Angular to manage and update the input values dynamically.

  • ngSubmit is used to bind the form’s submission event to a function in the component, triggering the logic when the form is submitted.

  • The FormsModule is essential for working with Angular forms and must be imported to handle user input data effectively.

  • Proper form handling in Angular enables validation, data retrieval, and dynamic display of input values on the frontend.

Submitting form data in Angular

Below is a step-by-step guide on how to submit form data in an Angular application:

Step 1: The component’s HTML file

We’ll add the following code snippet representing a simple HTML form with an email and password field.

<form #userlogin = "ngForm" (ngSubmit)="onSubmit()" novalidate>
    <input type = "text" name = "email" placeholder = "email" [(ngModel)]="formData.name">
    <input type = "password" name = "password" placeholder = "password" [(ngModel)]="formData.password">
    <button type="submit" >Submit</button>
    <br/>
 </form>
<div *ngIf="submitted">
  <h3>Submitted Data:</h3>
  <p>Email: {{ formData.name }}</p>
  <p>Password: {{ formData.password }}</p>
</div>

In the above code:

  • Line 1: We use the ngSubmit directive and bind it to a onSubmit() function so that the function is executed when we click the “Submit” button in the form.

  • Lines 2–4: We also have included the ngModel directive in the form’s <input> tags. The ngModel directive stores users’ input values inside a variable that can be reused later, so when a user provides some input in the email and password fields, the data is stored in the name and password variables.

  • Lines 10–14: We use a submitted boolean variable to display the contents. If it changes its value to true, the contents inside the name and password variables are displayed as <p> tags.

Step 2: The component’s TypeScript file

The following code will specify what we do once the user clicks the “Submit” button on the form:

import { Component } from '@angular/core';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  formData = {
    name: '',
    password: ''
  };
  submitted: boolean = false;
  onSubmit(){
    this.submitted = true;
  }
}

In the above code:

  • Lines 9–12: We define an object with two variables, name and password corresponding to the input fields, as these are the input fields we want to retrieve from the form.

  • Line 14: We define a submitted boolean variable and set its initial value to false. This variable is used by the frontend to display the values that the user entered.

  • Lines 16–18: Here, we will define the logic for our onSubmit() function that we have bound to the form. If the “Submit” button is clicked, we set the value of the submitted variable to true, and it displays the user inputs onto the web page.

Step 3: Importing the FormsModule

Once we have configured the form component using the steps above, we need to import the FormsModule from @angular/forms to the app.module.ts file.

The file app.module.ts can be found in the app directory of the Angular project. This file allows the program to access defined services, components, and other modules. Below we can see the code structure for our app.module.ts file.

import { FormsModule } from '@angular/forms'; // Add this import statement
@NgModule({
  declarations: [
    // All declarations
  ],
  imports: [
    // All modules
    FormsModule //Add the forms module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the above code:

  • Line 1: We import the FormsModule from @angular/forms.

  • Line 10: We add the FormsModule to our list of imports so the application can access it.

Form submit application

Below is an Angular application showing how to submit form data:

<app-form></app-form>
Sample Angular application

When we click the “Submit” button after entering the values, we see the values displayed on the web page under the input fields. This shows that our form data was successfully submitted.

Conclusion

To submit form data in Angular, the ngModel and ngSubmit directives are key. While ngModel handles two-way data binding between form inputs and component properties, ngSubmit handles the form’s submission event. Don’t forget to import the FormsModule into the Angular application to enable form functionality.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What does submit() do in form?

The submit() method in a form triggers the form submission event, sending the form data to the server or handling it locally based on the form handler’s logic. In Angular, we typically bind this event to a function using ngSubmit.

How to submit the form on by pressing enter with Angular

Angular forms support submission via the enter key by default. Ensure that the form has a submit button and that the form element uses the ngSubmit directive to bind the submit action. Pressing “Enter” will trigger the form submission as if the user clicked the “Submit” button.

How to get form values on submit in Angular

To get form values in Angular upon submission, bind the input fields to component properties using the ngModel directive. When the form is submitted (via ngSubmit), qw can access the values stored in the bound component properties.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved