Author avatar

Chris Parker

How to Submit Form Data Using Angular

Chris Parker

  • Aug 12, 2020
  • 7 Min read
  • 305 Views
  • Aug 12, 2020
  • 7 Min read
  • 305 Views
Languages Frameworks and Tools
Front End Web Developer
Client-side Frameworks
Angular

Introduction

In this guide, you will learn how forms are utilized in Angular, including two different ways of working with forms:

  1. Template-driven forms
  2. 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }
javascript

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
2
3
4
5
6
7
<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>
html

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'My Angular Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}
javascript

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }
javascript

In app.component.ts, import a couple of modules like FormGroup and FormControl for the model-driven form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'My Angular Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}
javascript

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName="emailid">
      <br/>
      
      <input type = "password" class = "fortextbox" name="passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      
      <input type = "submit" class = "forsubmit" value = "Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>
javascript

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.

2