Home.html
========================
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Signup</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="login-page">
<form [formGroup]="todo" (ngSubmit)="onSignup()">
<ion-list>
<ion-item>
<ion-label fixed>Fullname</ion-label>
<ion-input type="text" formControlName="fullname" type="text" [class.invalid]="!todo.controls.fullname.valid && (todo.controls.fullname.dirty || submitAttempt)"></ion-input>
</ion-item>
<ion-item *ngIf="!todo.controls.fullname.valid && (todo.controls.fullname.dirty || submitAttempt)">
<p>Please enter a atleast 5 letters!</p>
</ion-item>
<ion-item>
<ion-label fixed>Email</ion-label>
<ion-input type="text" formControlName="email" type="email" [class.invalid]="!todo.controls.email.valid && (todo.controls.email.dirty || submitAttempt)"></ion-input>
</ion-item>
<ion-item *ngIf="!todo.controls.email.valid && (todo.controls.email.dirty || submitAttempt)">
<p>Your email is incorrect!</p>
</ion-item>
<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text" formControlName="username" [class.invalid]="!todo.controls.username.valid && (todo.controls.username.dirty || submitAttempt)"></ion-input>
</ion-item>
<ion-item *ngIf="!todo.controls.username.valid && (todo.controls.username.dirty || submitAttempt)">
<p>Username should be atleast 5 letters</p>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="text" formControlName="password" type="password" [class.invalid]="!todo.controls.password.valid && (todo.controls.password.dirty || submitAttempt)"></ion-input>
</ion-item>
<ion-item *ngIf="!todo.controls.password.valid && (todo.controls.password.dirty || submitAttempt)">
<p>Atleast 1 capital and 1 digit</p>
</ion-item>
<div padding>
<button ion-button type="submit" primary block [disabled]="!todo.valid">Sign Up</button>
</div>
</ion-list>
</form>
<p class="error_msg"> {{error}}</p>
</ion-content>
Home.ts
===============
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import {NavController,NavParams,LoadingController } from 'ionic-angular';
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import 'rxjs/Rx';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
@Injectable()
export class HomePage {
private todo : FormGroup;
error:string;
fullname:any;
email:any;
username : any;
password:any;
dataRecv: any;
logindata:any;
handleError:any;
body:string;
constructor(public navCtrl: NavController,public http: Http,public navParams: NavParams,public loadingCtrl: LoadingController,private formBuilder: FormBuilder) {
this.navCtrl = navCtrl;
this.todo = this.formBuilder.group({
fullname: ['', Validators.compose([Validators.minLength(5), Validators.required])],
email: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'), Validators.required])],
username: ['', Validators.compose([
Validators.maxLength(10),
Validators.minLength(5),
Validators.pattern('^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$'),
Validators.required
])],
password: ['', Validators.compose([
Validators.minLength(5),
Validators.required,
Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
])],
});
}
onSignup()
{
this.fullname=this.todo.value.fullname;
this.email=this.todo.value.email;
this.username=this.todo.value.username;
this.password=this.todo.value.password;
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let data=JSON.stringify({fullname:this.fullname,email:this.email,username:this.username,password:this.password});
this.http.post('http://localhost/Outdoorly/postResponse.php',data,headers)
.map(res => res.json())
.subscribe(res => {
//alert("success "+res);
this.error=res;
setTimeout(() => {
loading.dismiss();
}, 2000);
}, (err) => {
//alert("failed");
this.error="Error occured!";
setTimeout(() => {
loading.dismiss();
}, 2000);
});
}
}
postResponse.php
======================
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "outdoorly";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$fullname=$request->fullname;
$email=$request->email;
$username=$request->username;
$password=$request->password;
if($fullname!=""&&$email!=""&&$username!=""&&$password!="" )
{
$sql = "INSERT INTO users(fullname,email,username,password)VALUES('$fullname','$email','$username','$password')";
if ($conn->query($sql) === TRUE) {
echo json_encode("New record created successfully");
} else {
echo json_encode("Error: " . $sql . "<br>" . $conn->error);
}
$conn->close();
}
else
{
echo json_encode("Please fill all the fields!");
}
}
else
{
echo "Not allowed";
}
