Home Angular6 Save Angular 6 Form Data in Mysql Database

Save Angular 6 Form Data in Mysql Database

by therichpost
Angular 6 Material Datatables example with Php Mysql data

Hello to all, welcome to therichpost.com. In this post, I will tell you, Save Angular 6 Form Data in Mysql Database. 

With Angular 6, we will use HTTPCLIENT module to save form fields data into PHP MYSQL. This is very interesting and useful post by my point of view.

Also in it, I covered  with form validation part and this is helpful.


Angular 6 is getting more popularity day by day because of its fantastic features and today I am sharing one of the most important HTTPCLIENT feature.

Here are the following steps need to do for Save Angular 6 Form Data in Mysql Database:
 1. First this is the code for app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }
 2. After that, add below code into app.component.ts file:
import {Component} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient, HttpParams } from '@angular/common/http';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'my-angular-app';
  registerForm: FormGroup;
  submitted = false;

    constructor(private formBuilder: FormBuilder, private http: HttpClient) { }

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.minLength(6)]]

    // convenience getter for easy access to form fields
    get f() { return this.registerForm.controls; }
   posts: any;
    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.registerForm.invalid) {
    // Initialize Params Object
    let Params = new HttpParams();

    // Begin assigning parameters
    Params = Params.append('firstParameter', this.registerForm.value.firstName);
    Params = Params.append('secondParameter', this.registerForm.value.lastName);
    return this.http.get('http://localhost/mypage.php'
    params: { params: Params }
    }).subscribe(data => {
      this.posts = data;
      // show data in console

 3. After that add below code into your app.component.html file:
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h3> Welcome to {{ title }}!</h3>
                <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <label>First Name</label>
                        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
                        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                            <div *ngIf="f.firstName.errors.required">First Name is required</div>
                    <div class="form-group">
                        <label>Last Name</label>
                        <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
                        <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                            <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                    <div class="form-group">
                        <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
                        <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                            <div *ngIf="f.email.errors.required">Email is required</div>
                            <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                    <div class="form-group">
                        <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                        <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                            <div *ngIf="f.password.errors.required">Password is required</div>
                            <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
                    <div class="form-group">
                        <button class="btn btn-primary">Submit</button>
4. Finally here is the php file mypage.php code to save Angular 6 Form data and I am just sharing the output receive form Angular 6: 
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$conn = new mysqli('localhost','root','root','user');
$myArr = array();
$myArr[] = $_GET['params'];
$myJSON = json_encode($myArr);
echo $myJSON;



And you are done. If you have any query related to this post then you can ask questions or comment below.

You may also like


Justina Ng September 23, 2018 - 4:30 am

nice and awesome post sir. Please sir can you do article on how display database records using php and angular 6


Ajay Malhotra September 23, 2018 - 10:05 am

Thank you and sure, I will make post on your request. 🙂

Ajay Malhotra September 23, 2018 - 10:11 am

Hi, you can check this post:

In this post, I am getting data from mysql.

revathi April 23, 2019 - 6:03 am

params: { params: Params }
ihave error in this line

revathi April 23, 2019 - 6:04 am

params: { params: Params }
params i don’t understand i have error in this line

Ajay Malhotra April 24, 2019 - 4:37 pm

Can you please tell me the error or I think, there must be undefined parameter in the list.

sai July 2, 2019 - 12:33 pm

I got the same error, please take a look at it. I am using angular 8
Type ‘{ params: HttpParams; }’ is not assignable to type ‘HttpParams | { [param: string]: string | string[]; }’.
Type ‘{ params: HttpParams; }’ is not assignable to type ‘{ [param: string]: string | string[]; }’.
Property ‘params’ is incompatible with index signature.
Type ‘HttpParams’ is not assignable to type ‘string | string[]’.
Type ‘HttpParams’ is missing the following properties from type ‘string[]’: length, pop, push, concat, and 24 more.ts(2322)
http.d.ts(1090, 9): The expected type comes from property ‘params’ which is declared

sayali May 16, 2019 - 7:58 am

i am new in angular ,can u tell me where can i save that mypage.php file

Ajay Malhotra May 16, 2019 - 3:24 pm

Hi Sayali, you can place this into your Htdocs folder.

V. Senthilkumar December 23, 2020 - 6:21 am

Hi Ajay, i have placed this into my Htdocs folder, but still i getting this same error

Ajay Malhotra July 2, 2019 - 4:57 pm

Hi Sai, I will update this you tomorrow.

Thank you

sai July 4, 2019 - 7:05 am

Thank you

Akhil ashok September 27, 2019 - 7:27 am

can you please post the css file of this codee

Ajay Malhotra September 27, 2019 - 4:37 pm

you want that for form styling?

Divya December 4, 2019 - 4:54 am

Can you please tell how you created table in localhost/phpmyadmin?

Ajay Malhotra December 5, 2019 - 3:47 pm

It is very simple. go to localhost/phpmyadmin and first create new database then create tables in that database.

Satish Derle April 6, 2020 - 12:40 pm

Dear Sir,

I am new to Angular and just started the learning. You post is really helpful to new bees. I have question, why you taking help of php to save data to database. Will you post this code for using Express/REST APIs. Or please give link for the sam.

Thanking you Sir. Please keep coding for new learners.


Ajay Malhotra April 6, 2020 - 12:43 pm

Yes sure and I have one youtube channel also so please subscribe that also, you will also learn a lot from there.

mayur April 19, 2021 - 2:00 pm

No overload matches this call.
The last overload gave the following error.
Type ‘HttpParams’ is not assignable to type ‘string | string[]’.
Type ‘HttpParams’ is missing the following properties from type ‘string[]’: length, pop, push, concat, and 24

Pushpanjali April 22, 2021 - 5:21 am

Hey! How I can create this using filezilla server.

Ajay Malhotra April 22, 2021 - 4:12 pm

Can you please explain it better.

Amir Shahazad October 31, 2021 - 6:09 am

i used this example which working well but when i want to upload image using multer on cloudinary with nodejs backend then form data is not saving into mongodb database can you please add example to upload image on multer with other form data like (usename , address and image of user).
Thank you sir

Ajay Malhotra November 1, 2021 - 4:28 pm

Yes sure and thanks.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.