Monday, November 23, 2020

Save Angular 6 Form Data in Mysql Database

Save Angular 6 Form Data in Mysql Database - The Rich Post

Hello to all, welcome to 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 ={
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required,]],
            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 && }" />
                        <div *ngIf="submitted &&" class="invalid-feedback">
                            <div *ngIf="">Email is required</div>
                            <div *ngIf="">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.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.


Leave a Reply

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