Insert and updating the data to database from frontend - sql

Question

I am new to web development. I am working in development of an angular application. I have developed an Angular form in front end, Node.js and Sql server in backend. I need some help to connect my angular form to the sql server database. I want to save the data from my angular form to my sql server database.
Versions:
Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.1
I have tried using the restful api to insert data through the server page using post and get.
How can i to connect my angular form to sql databse and insert and update the data when the submit button in my angular form is clicked.
var express = require("express");
var bodyParser = require("body-parser");
var tediousExpress = require("express4-tedious");
var path = require("path")
var app = express();
// Body Parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
//CORS Middleware
app.use(function (req, res, next) {
//Enabling CORS
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, contentType,Content-Type, Accept, Authorization");
next();
});
app.get('/', function (req, res) {
var sql = require("mssql");
// config for your database
var config = {
server:'******',
database: '*******',
user:'******',
password: '*****',
};
// connect to your database
sql.connect(config, function (err) {
if (err) console.log(err);
// create Request object
var request = new sql.Request();
// query to the database and get the records
request.query('select * from dbo.contact', function (err, recordset) {
if (err)
console.log(err)
else
// send records as a response
res.send(recordset);
});
});
});
app.use("/contact", (req, res) => {
res.sendfile( __dirname + "/src/app/contact/contact.component.html");
});
app.use("/product", (req, res) => {
res.sendfile( __dirname + "/src/app/product/product.component.html");
});
app.use("/homepage", (req, res) => {
res.sendfile( __dirname + "/src/app/home/home.component.html");
});
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}....`));
<div style="text-align:center">
<h1 class="well">
We are available here for you
</h1>
<div class="loader" *ngIf="dataloading"></div>
<div class = "row">
<div class="column">
<div class ="container">
<div class="col-md-5">
<div class="form-area">
<form role="form" (ngSubmit)="processForm()">
<br style="clear:both">
<h3 style="margin-bottom: 50px; text-align: center;">Contact</h3>
<div class="form-group">
<input required ngModel name="Name" #FirstName="ngModel" (change)="log(Name)" type="text" class="form-control" id="Name" name="name" placeholder="Name" [(ngModel)]="name" required>
<div class="alert alert-danger" *ngIf="Name.touched && !Name.valid" > Name is required.</div>
</div>
<div class="form-group">
<input required type="email" class="form-control" id="email" name="email" placeholder="Email" [(ngModel)]="email" required>
<div class="alert alert-danger" *ngIf="email.touched && !email.valid" > Email is required.</div>
</div>
<div class="form-group">
<input type="phone" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" [(ngModel)]="mobile" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" [(ngModel)]="subject" required>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" name="message" placeholder="Message max(200)" [(ngModel)]="message" maxlength="140" rows="7"></textarea>
</div>
<hr class="mb-4">
<button type="button" id="submit" name="submit" class="btn btn-primary btn-lg btn-block" (click)="save(name, email, mobile, subject, message)">Submit</button>
</form>
</div>
</div>
</div>
````
````contact.component.ts
import { Component, OnInit} from '#angular/core';
import {HttpClient} from '#angular/common/http';
import {HttpErrorResponse} from '#angular/common/http';
import {Router} from '#angular/router';
#Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css']
})
export class ContactComponent {
title = 'Simple Example Contact-us page using Angular 4';
public data:any=[]
constructor(private http: HttpClient){
}
save(name, email, mobile, subject, message): void {
this.data['name']= name;
this.data['email']= email;
this.data['mobile']= mobile;
this.data['subject']= subject;
this.data['message']= message;
console.log(this.data);
//add request to send email or into mysql
this.http.post<any>('/contact1', this.data).subscribe(
res => {
console.log(res);
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log("Client-side error occured.");
} else {
console.log("Server-side error occurred.");
}
});
}
}
````