How to Submit Form Data Using Angular
Introduction
In this guide, you will learn how forms are utilized in Angular, including two different ways of working with forms:
- Template-driven forms
- Model-driven forms
You should do most of your work in a template using a template-driven form. However, if you need to work in the component class, work with a model-driven form.
Template-driven Form
Let's first work with a template-driven form. Create a basic login form and include email ID, password, and a submit button in the form.
Here is how the app.module.ts should look:
1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3import { RouterModule} from '@angular/router';
4import { HttpModule } from '@angular/http';
5import { FormsModule } from '@angular/forms';
6import { AppComponent } from './app.component';
7import { MyserviceService } from './myservice.service';
8import { NewCmpComponent } from './new-cmp/new-cmp.component';
9import { ChangeTextDirective } from './change-text.directive';
10import { SqrtPipe } from './app.sqrt';
11@NgModule({
12 declarations: [
13 SqrtPipe,
14 AppComponent,
15 NewCmpComponent,
16 ChangeTextDirective
17 ],
18 imports: [
19 BrowserModule,
20 HttpModule,
21 FormsModule,
22 RouterModule.forRoot([
23 {path: 'new-cmp',component: NewCmpComponent}
24 ])
25 ],
26 providers: [MyserviceService],
27 bootstrap: [AppComponent]
28})
29export class AppModule { }In app.module.ts, import FormsModule and add the same in the imports array.
Now, create a form in the app.component.html file.
1<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
2 <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
3 <br/>
4 <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
5 <br/>
6 <input type = "submit" value = "submit">
7</form>You have created a simple form with input elements for email ID, password, and the submit button and also assigned type, name, and placeholder to it.
Create the model form controls by including the ngModel command and the name attribute. When you need Angular to access your data from forms, add ngModel to that tag as shown above. Now, if you want to read the email address and password, add ngModel for that field.
You can see ngForm added to #userlogin. Now, add the ngForm directive to this form. Then add the onclicksubmit function and pass userlogin.value to it.
We'll add a function in app.component.ts and retrieve the values entered in the form.
1import { Component } from '@angular/core';
2import { MyserviceService } from './myservice.service';
3@Component({
4 selector: 'app-root',
5 templateUrl: './app.component.html',
6 styleUrls: ['./app.component.css']
7})
8export class AppComponent {
9 title = 'My Angular Project!';
10 todaydate;
11 componentproperty;
12 constructor(private myservice: MyserviceService) { }
13 ngOnInit() {
14 this.todaydate = this.myservice.showTodayDate();
15 }
16 onClickSubmit(data) {
17 alert("Entered Email id : " + data.emailid);
18 }
19}In app.component.ts above, you have defined the onclicksubmit function. Clicking on the submit button will cause control to come to the above function and you can see the data entered by the user.
Model-driven Form
Import the ReactiveFormsModule from @angular/Forms and add it in the imports array for the model-driven form.
Below is the app.module.ts.
1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3import { RouterModule} from '@angular/router';
4import { HttpModule } from '@angular/http';
5import { ReactiveFormsModule } from '@angular/forms';
6import { AppComponent } from './app.component';
7import { MyserviceService } from './myservice.service';
8import { NewCmpComponent } from './new-cmp/new-cmp.component';
9import { ChangeTextDirective } from './change-text.directive';
10import { SqrtPipe } from './app.sqrt';
11@NgModule({
12 declarations: [
13 SqrtPipe,
14 AppComponent,
15 NewCmpComponent,
16 ChangeTextDirective
17 ],
18 imports: [
19 BrowserModule,
20 HttpModule,
21 ReactiveFormsModule,
22 RouterModule.forRoot([
23 {
24 path: 'new-cmp',
25 component: NewCmpComponent
26 }
27 ])
28 ],
29 providers: [MyserviceService],
30 bootstrap: [AppComponent]
31})
32export class AppModule { }In app.component.ts, import a couple of modules like FormGroup and FormControl for the model-driven form.
1import { Component } from '@angular/core';
2import { MyserviceService } from './myservice.service';
3import { FormGroup, FormControl } from '@angular/forms';
4@Component({
5 selector: 'app-root',
6 templateUrl: './app.component.html',
7 styleUrls: ['./app.component.css']
8})
9export class AppComponent {
10 title = 'My Angular Project!';
11 todaydate;
12 componentproperty;
13 emailid;
14 formdata;
15 constructor(private myservice: MyserviceService) { }
16 ngOnInit() {
17 this.todaydate = this.myservice.showTodayDate();
18 this.formdata = new FormGroup({
19 emailid: new FormControl("[email protected]"),
20 passwd: new FormControl("abcd1234")
21 });
22 }
23 onClickSubmit(data) {this.emailid = data.emailid;}
24}The variable formdata is initialized at the time of class creation. The variables emailid and passwd are initialized with default values to be shown in the form. You can keep it blank if you want.
Use formdata to introduce the form values and again use them in the form UI app.component.html
.
1<div>
2 <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
3 <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid"
4 formControlName="emailid">
5 <br/>
6
7 <input type = "password" class = "fortextbox" name="passwd"
8 placeholder = "passwd" formControlName = "passwd">
9 <br/>
10
11 <input type = "submit" class = "forsubmit" value = "Log In">
12 </form>
13</div>
14<p>
15 Email entered is : {{emailid}}
16</p>In the HTML document, you have used formGroup in square bracket for the form.
For instance, [formGroup]="formdata". When submitted, the function onClickSubmit is invoked and formdata.value is passed.
The input tag has the attribute formControlName and you pass a value that'll be used in app.component.ts.
On clicking submit, control will be sent to onClickSubmit defined in app.component.ts.
Conclusion
This is how forms are utilized in Angular and some different ways of working with forms.