Simple Form To Submit Data To Service In Angular 9 With Bootstrap

Step by step tutorial to Create a reactive form in Angular 9.

Introduction

 

This blog will help you to understand how reactive forms are built to pass data from UI to Service Component. 

 

Background

 

In order to understand this blog one should have a basic understanding of Angular 2+ and Bootstrap.

 

Create a new project in Angular 9 using the following commands:

 

ng new

 

Name the project : RegDemo

 

Select "Yes" for Angular routing.

 

Select "Css" for Styling. 

 

Once the RegDemo project is created go to the directory by using the following command.

 

cd RegDemo

 

Now install Bootstrap with the following command: 

 

npm install bootstrap --save

 

When Bootstrap is installed open angular.json file and add bootstrap.min.css file reference under "styles":

"styles": [
   "src/styles.css",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Now we need to create components and service. Use the following commands to create the same. 

 

ng g c header

ng g c footer 

ng g c reg

ng g c home

ng g s data 

 

Note

g stands for generate | c stands for Component | s stands for Service

 

Open app-routing.modules.ts file and add these lines:

import { RegComponent } from './reg/reg.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
   { path: "", pathMatch: "full", redirectTo: "home" },
   { path: "home", component: HomeComponent },
   { path: "reg", component: RegComponent }
];

 In app.component.html replace the existing code with the below code:

<app-header></app-header>
   <router-outlet></router-outlet>
<app-footer></app-footer>

 Let's start with components now.

 

Open home.component.html file and replace with the code below.

<div class="jumbotron" style="background-color: #fff; height: calc(95vh);">
    <h1>Angular Bootstrap Demo</h1>
    <p class="lead">
This demo shows how to integrate Bootstrap 4 with Angular 7
</p>
    <a class="btn btn-lg btn-primary" href="" role="button">View tutorial</a>
</div>

Open header.component.html file and replace with the code below.

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#">Angular Bootstrap Demo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" routerLink="/home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/contact-list">Contacts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/contact-create">Create</a>
            </li>
        </ul>
    </div>
</nav>

Open header.component.css file and replace with the code below.

.nav-item{
   padding:2px;
   margin-left: 7px;
}

Open footer.component.html file and replace with the code below. 

<footer>
   <p class="text-xs-center">© Copyright 2019. All rights reserved.</p>
</footer>

Open footer.component.css file and replace with the code below.

footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1 rem;
    text - align: center;
}

Now let's start working with Forms. For this import FormsModule and ReactiveFormsModule in app.modules.ts file.

import{FormsModule,ReactiveFormsModule} from '@angular/forms';

And add  the below modules under imports:

FormsModule,
ReactiveFormsModule

Now let's create a function in Service.

 

Open data.service.ts file and replace with the code below.  

public SaveEmployee(empdata) {
   console.log("Full Name : " + empdata.regFullName);
   console.log("Email Id : " + empdata.regEmail);
}

Open reg.component.html file and replace with the code below. 

<div class="container" style="margin-top: 150px;">
    <form [formGroup]="frmRegister" (ngSubmit)="SaveEmployee(frmRegister.value)">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Employee Registration</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label for="fullName">Full Name</label>
                    <input id="fullName" formControlName="regFullName" type="text" class="form-control" required />
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input id="email" formControlName="regEmail" type="email" class="form-control" required />
                </div>
            </div>
            <div class="panel-footer">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>
    </form>
</div>

Open reg.component.ts file and replace with the code below.

import {
    Component,
    OnInit
} from '@angular/core';
import {
    FormGroup,
    FormBuilder
} from '@angular/forms';
import {
    DataService
} from '../data.service';
@Component({
    selector: 'app-reg',
    templateUrl: './reg.component.html',
    styleUrls: ['./reg.component.css']
})
export class RegComponent implements OnInit {
    frmRegister: FormGroup;
    constructor(private _fb: FormBuilder, private dataservice: DataService) {}
    ngOnInit(): void {
        this.frmRegister = this._fb.group({
            regFullName: "",
            regEmail: ""
        });
    }
    SaveEmployee(value) {
        this.dataservice.SaveEmployee(value);
    }
}

Now build your application by ng build.

 

Run application by ng serve.

 

 

Summary

 

In this article, I explained how to create a simple angular application to send data from UI to service/api.

 

I believe that I have explained each step clearly so  that it can be easily understood by beginners who want to develop a new application.