Friday, April 12, 2024
Angular 8Angular 9MysqlPhp

Angular 9 | PHP User Registration Form

Angular 9 | PHP User Registration Form

Hello to all, welcome to In this post, I will tell you, Angular 9 | PHP User Registration Form.

Post working:

In this post, I am making user registration form in Angular 9 and php. Angular 9 is my frontend and php is my backend.

Here is the complete code snippet and please use carefully:

1. Here are the basics commands to set angular 9 your system:

npm install -g @angular/cli 

ng new angularcrud //Create new Angular Project

$ cd angularcrud // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url


2. Here are the command to install bootstrap 4  into your angular 9 application:

npm install --save bootstrap


3. Now you need to add below bootstrap files path into your angular.json file:

"styles": [
"scripts": [


4. Now you need to add below code into your app.module.ts file:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
imports: [


5. Now you need to add below code into your app.component.html file:

<h2 class="mt-3 mb-3">User Regsiteration</h2>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" placeholder="Enter name" id="name" formControlName="name" [ngClass]="{ 'is-invalid': submitted && }">
  <div *ngIf="submitted &&" class="invalid-feedback">
      <div *ngIf="">Name is required</div>
  <div class="form-group">
    <label for="pwd">Email:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email" formControlName="email" [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">
    <label for="phone">Phone:</label>
    <input type="text" class="form-control" placeholder="Enter phone" id="phone" formControlName="phone" [ngClass]="{ 'is-invalid': submitted && }">
  <div *ngIf="submitted &&" class="invalid-feedback">
      <div *ngIf="">Phone is required</div>
  <div class="form-group">
    <label for="phone">Password:</label>
    <input type="password" class="form-control" placeholder="Enter phone" id="phone" formControlName="password" [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>
  <button type="submit"  class="btn btn-primary mb-3">Submit</button>


6.  Here is the code, you need to add into your app/app.component.ts file:

import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';
export class AppComponent implements OnInit {
  registerForm: FormGroup;
  submitted = false;
  constructor(private http: HttpClient, private formBuilder: FormBuilder) { }
  get f() { return this.registerForm.controls; }
  onSubmit() {
  this.submitted = true;
        // stop here if form is invalid
        if (this.registerForm.invalid) {
    // Initialize Params Object
    var myFormData = new FormData();
    const headers = new HttpHeaders();
    // Begin assigning parameters
    myFormData.append('password', this.registerForm.value.password);
      , myFormData).subscribe((res: Response) => {
     console.log("User Registration has been done.");
  ngOnInit(): void {
  this.registerForm ={
            name: ['', Validators.required],
            phone: ['', Validators.required],
            email: ['', [Validators.required,]],
            password: ['', Validators.required]



Here is the php code myphp.php for add and get user data and also please xampp control panel and this file will me in htdocs folder:

1. Code for php file(mypage.php):

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','','user');
  $sql = "INSERT INTO userdata (firstname, email, mobile, password)
  VALUES ('".$_POST['name']."', '".$_POST['email']."', ".$_POST['phone'].", ".$_POST['password'].")";

  if ($conn->query($sql) === TRUE) {
    $myJSON = json_encode("New user created successfully");
  } else {
    $myArr = "Error: " . $sql . "<br>" . $conn->error;
                $myJSON = json_encode($myArr);
         echo $myJSON;


This is it and if you have any kind of query then please do comment below.



the authortherichpost
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 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

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