Monday, November 30, 2020
therichposts@gmail.com
Angular 8Angular 9MysqlPhp

Angular 9 | PHP User Registration Form

Angular 9 | PHP User Registration Form

Hello to all, welcome to therichpost.com. 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": [
        ...
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ...
         ],
"scripts": [
       ...
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ...
       ]

 

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: [
  FormsModule,
  HttpClientModule,
  ReactiveFormsModule,
  ...
  ],
...

 

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 && f.name.errors }">
  <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
      <div *ngIf="f.name.errors.required">Name is required</div>
  </div>
  </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 && 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>
  </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 && f.phone.errors }">
  <div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
      <div *ngIf="f.phone.errors.required">Phone is required</div>
  </div>
  </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>
  </div>
  </div>
  
  <button type="submit"  class="btn btn-primary mb-3">Submit</button>
</form>

 

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) {
    
              return;
        }
    else
    {
    // Initialize Params Object
    var myFormData = new FormData();
    const headers = new HttpHeaders();
    // Begin assigning parameters
    myFormData.append('name', this.registerForm.value.name);
    myFormData.append('email', this.registerForm.value.email);
    myFormData.append('phone', this.registerForm.value.phone);
    myFormData.append('password', this.registerForm.value.password);
    return this.http.post('http://localhost/mypage.php/'
      , myFormData).subscribe((res: Response) => {
     console.log("User Registration has been done.");
      
      
        
    });
    }
    }
  ngOnInit(): void {
  this.registerForm = this.formBuilder.group({
            name: ['', Validators.required],
            phone: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            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):

<?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');
if(isset($_POST['name']))
{
  $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.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. 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.