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.
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:
ngModelenables two-way data binding between the form inputs and the component, allowing Angular to manage and update the input values dynamically.
ngSubmitis used to bind the form’s submission event to a function in the component, triggering the logic when the form is submitted.The
FormsModuleis 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.
Below is a step-by-step guide on how to submit form data in an Angular application:
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.
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.
FormsModuleOnce 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 modulesFormsModule //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.
Below is an Angular application showing how to submit form data:
<app-form></app-form>
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.
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.
Haven’t found what you were looking for? Contact Us
Free Resources