Most Amazing Videos Clips - Youtube | Amazing Internet Dose

(Ionic 2:UPDATED: v2.2.3 ) Html and Angular 2 Advance form Validation (Connection with PHP )


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";
}