How to create a signup form and edit the details using Angular2

Dated : 18/10/2018

In this blog we are going to see how to create a signup form and edit the details of the user using Angular2.

Pre-requites: To do this you have to install the Angular 2 in your machine if you doesn’t have the angular 2 in you machine you can install this using our previous post.

Angular 2 installation

Step 1: Create a new Angular 2 project.(This will probably take a few minutes belongs to the system performance)

ng new project_name

Step 2: There is a default app component will be created while creating the project if you want to create another new component with different name you can use

ng generate component [component-name]


Step 3: To create the signup form using angular2 add the below html code in app.component.html

Step 4: Add the below code in app.component.ts

import { Component } from '@angular/core';
import { Http, Headers, RequestOptions,HttpModule } from '@angular/http';
import { ActivatedRoute } from '@angular/router';
import {HttpClientModule} from '@angular/common/http';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent 
{
  
  constructor (private http:Http) { }
  title = 'app';
  clickAlert() 
{
    //alert("Data Saved Successfully");
    var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  
  var data = document.getElementById("Name");
  console.log(data.value);
  var data1 = document.getElementById("Gender");
  console.log(data1.value);
  var data2 = document.getElementById("Mail");
  console.log(data2.value);
  var data3 = document.getElementById("Qualification");
  console.log(data3.value);
  var data4 = document.getElementById("Hobbies");
  console.log(data4.value);
  var data5 = document.getElementById("Phone");
  console.log(data5.value);
  /*let datas = {'Name': 'data.value',  
  @'Gender' 'data1.value', '&Mail='+data2.value, '&Qualification='+data3.value, '&Hobbies='+data4.value, '&Phone='+data5.value
  };*/
   var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
     
     var params = 'Name='+data.value+'&Gender='+data1.value+'&Mail='+data2.value, '&Qualification='+data3.value, '&Hobbies='+data4.value, '&Phone='+data5.value;
    this.http.post('http://localhost/connectphp.php', params , {headers: headers})
      .subscribe(
        data => console.log('Received:' + data),
        err => console.log(err),
        () => console.log('Call Complete')
      );

   	}
}

Before adding this code don’t forgot to create the database in mysql here we are using mysql database.

Step 5: To connect the values with the mysql database we can pass the values through the php connection. Below we have attached the code of php connection for the database. Here we gave the php file name as connectphp.php. If you want any other name just change the file name and the below source code on this php file.

<?php
print_r($_POST);
$Name = $_POST['Name'];
$Gender = $_POST['Gender'];
$Mail = $_POST['Mail'];
$Qualification = $_POST['Qualification'];
$Hobbies = $_POST['Hobbies'];
$Phone = $_POST['Phone'];

?>

<?php
$servername = "localhost";
$dbname = "testing";
$username = "rakesh";
$password = "";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

echo $sql = "INSERT INTO model (name,gender,gmail,qualification,hobbies,phoneno)
VALUES ('$Name','$Gender','$Mail','$Qualification','$Hobbies','$Phone' )";

if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);
?>