Categories

Thursday, March 28, 2024
#919814419350 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

therichpost
the authortherichpost
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 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.