Registration Form using Node js Angular Mongodb

In this Article explains how to create registration using Node js and Mongodb and Angular .Node js as backend front end angular.

First you have to Create the Project

npm init

After run the command package.json file has been created.

First Step Create the page which is server.js which use to connect the port and databases.

index.js

const express = require('express');
const app = express();
const mongoose = require('mongoose');
mongoose.set('strictQuery', true);
var routes = require('./routes/routes');
const cors = require('cors');

app.use(cors(
    {
      origin: "http://localhost:4200"
    }
   
  ));

mongoose.connect("mongodb://127.0.0.1:27017/dbschool",{useNewUrlParser: true,  useUnifiedTopology: true },
function checkDB(error)
{
    if(error)
    {
        console.log(error)
    }
    else
    {
        console.log("DB Connectedddd!!!!!!!!!!!")
    }
});


app.listen(8086,function port(error)
{
    if(error)
    {
        console.log(error)
    }
    else
    {
        console.log("Port  Connectedddd!!!!!!!!!!! 8086")
    }
});

app.use(express.json());
app.use(routes);

employeeController.js

var employeeModel = require('./employeeModel');

var createUserControllerFn = async (req, res) => 
{
    try
{
    const body = req.body
    const employeeModelData = new employeeModel()
    employeeModelData.name = body.name
    employeeModelData.address = body.address
    employeeModelData.phone = body.phone
    await employeeModelData.save()

    res.status(200).send({
        "status": true, "message": "Employee created successfully" 
    });
}
catch(error)
{
    res.status(400).send(error);
}

}
module.exports = { createUserControllerFn };

employeeModel.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var employeeSchema = new Schema({

    name: {
        type: String,
        required: true
    },
    address: {
        type: String,
        required: true
    },
    phone: {
        type: String,
        required: true
    }
  
});

module.exports = mongoose.model('employee', employeeSchema);

routes.js

const express = require('express');

const router = express.Router();
var employeeController = require('../src/employee/employeeController');

// router.post('/user/create', function(req, res) { employeeController.createUserControllerFn });
router.route('/user/create').post(employeeController.createUserControllerFn);

router.route('/user/findOne').get(employeeController.findOneUserController);
module.exports = router;

Installing Angular CLI

npm install -g @angular/cli

After that create the new Project of Angular running by the following command

ng serve

it will generate the url link to run the angular application.paste the url in to the browser

Now you see the Angular Welcome Page.

After that open the Angular project into VS code editor.

now you can see the following file structure

then you have create the following components by typing the command

ng g c register

After components has been created you have to visit the bootstrap site and copy the css

file and paste inside the

register.component.html

<div class="container mt-4" >
 
    <div class="card">
            <h1>Registation</h1>
     
    <form>
        <div class="form-group">
          <label>Name</label>
          <input type="text" [(ngModel)]="name" [ngModelOptions]="{standalone: true}"  class="form-control" id="name" placeholder="Enter Name">
     
        </div>
     
        <div class="form-group">
            <label>address</label>
            <input type="text" [(ngModel)]="address" [ngModelOptions]="{standalone: true}"  class="form-control" id="address" placeholder="Enter address">
      
          </div>
      
          <div class="form-group">
            <label>Phone</label>
            <input type="text" [(ngModel)]="phone" [ngModelOptions]="{standalone: true}" class="form-control" id="phone" placeholder="Enter Mobile">
      
          </div>
        
        <button type="submit" class="btn btn-primary mt-4" (click)="register()" >Submit</button>
      </form>
    </div>
    <div>

After that add module inside app.module.ts
inside the imports section add the FormsModule and HttpClientModule

if the path is not get automatically copy and paste it

import { HttpClientModule } from ‘@angular/common/http’;

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RegisterComponent } from './register/register.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

register.component.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent {

  name: string ="";
  address: string ="";
  phone: Number =0;

  constructor(private http: HttpClient )
  {
   
  }


  register()
  {
  
    let bodyData = {
      "name" : this.name,
      "address" : this.address,
      "phone" : this.phone
    };
    this.http.post("http://localhost:8086/user/create",bodyData,{responseType: 'text'}).subscribe((resultData: any)=>
    {
        console.log(resultData);
        alert("Registered Successfully");
      
 
        this.name = '';
      this.address = '';
        this.phone  = 0;
    });
  }

}