How to submit form data in Angular
Angular provides a ngModel directive that is used to handle form submission events. Data binding between form inputs and component properties is performed via the ngModel directive. It enables us to link properties in the component's class to the values of an input element in the HTML template.
Let's follow see a step-by-step detailed guide that explains how we can submit form data in Angular.
Steps to follow
Below are the steps we need to follow to submit form data in our Angular application.
The component's HTML file
We will 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>
Line 1: We use the
ngSubmitdirective and bind it to aonSubmit()function so that the function is executed when we click the "Submit" button in the form.Lines 2–4: We also have included the
ngModeldirective in the forms<input>tags. ThengModeldirective stores users' input values inside a variable that can be reused later, so when a user provides some input in theemailandpasswordfields, the data is stored in thenameandpasswordvariables.Lines 10–14: We use a submitted boolean variable to display the contents. If it changes its value to
true, the contents inside thenameandpasswordvariables are displayed as<p>tags.
The component's typescript file
We will specify what we will do once the user clicks the "Submit" button on the form in the following code.
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;}}
Lines 9–12: We define an object with two variables,
nameandpasswordcorresponding to the input fields, as these are the input fields we want to retrieve from the form.Line 14: We define a
submittedboolean variable and set its initial value tofalse. This variable is used by the front end 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 thesubmittedvariable totrue, and it displays the user inputs onto the webpage.
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 modulesFormsModule //add the forms module],providers: [],bootstrap: [AppComponent]})export class AppModule { }
Line 1: We import the
FormsModulefrom@angular/forms.Line 10: We add the
FormsModuleto 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>
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.
