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.

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:

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.

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:

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.