การส่งข้อมูลไปยัง backend service ด้วย HttpClient ใน Angular ตอนที่ 3

<form #registForm="ngForm" >
<input type="text" ngModel name="fullname">
<button type="submit">Send</button>
</form>

<input type="text" ngModel name="fullname">

{
	"fullname":""
}

<input type="text" ngModel #fullname="ngModel" name="fullname">

C:\projects\httpclient>ng g module register --routing

C:\projects\httpclient>ng g c register/register --flat

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegisterComponent } from './register.component';

const registerRoutes: Routes = [
  {
    path:'register',
    component:RegisterComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(registerRoutes)],
  exports: [RouterModule]
})
export class RegisterRoutingModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule }   from '@angular/forms';

import { RegisterRoutingModule } from './register-routing.module';
import { RegisterComponent } from './register.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RegisterRoutingModule
  ],
  declarations: [RegisterComponent]
})
export class RegisterModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule }   from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { ArticleModule } from './article/article.module';
import { RegisterModule } from './register/register.module';

import { AppComponent } from './app.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    PagenofoundComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    ArticleModule,
    RegisterModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" [routerLink]="['/home']">Angular</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" [routerLink]="['/home']">Home <span class="sr-only">
            (current)
          </span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link"  [routerLink]="['/article']">Article</a>
        </li>
        <li class="nav-item">
            <a class="nav-link"  [routerLink]="['/register']">Register</a>
          </li>        
      </ul>
    </div>
  </nav>
  
  <div class="container">
    <router-outlet></router-outlet>
  </div>

<p>  register works!</p>
<pre>{{ registForm.value | json }}</pre>
<form (ngSubmit)="onSubmit(registForm)" #registForm="ngForm" novalidate>
  <div class="form-group row">
    <label for="fullname" class="col-3 col-form-label text-right">
        ชื่อ นามสกุล
    </label>
    <div class="col-6">
      <input type="text" class="form-control is-invalid" ngModel #fullname="ngModel" 
      name="fullname" id="fullname" 
      [class.is-valid]="fullname.valid" [class.is-invalid]="!fullname.valid" 
      placeholder="Fullname" required>
      <div class="invalid-feedback">
        Please provide a valid Fullname.
      </div>      
    </div>
    <div class="offset-3"></div>
  </div>  
  <div class="form-row">
    <div class="col-9 offset-3">
      <button type="submit" [disabled]="!registForm.valid" class="btn btn-primary">
        สมัครสมาชิก
      </button>
    </div>
  </div>    
</form>
<br>

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  // selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  public urlApi:string = "http://localhost/demo/";
  public responseValue:any;

  constructor(
    private http:HttpClient,
    private route: ActivatedRoute,
    private router:Router
  ) { }  

  onSubmit(f:any){
    let data = f.value;
    this.http.post(this.urlApi+'show_data.php',data)    
    .subscribe(result =>{
      this.responseValue = result;
      console.log(result);
    },
    ( err:HttpErrorResponse ) => {
      // กรณี error
      if (err.error instanceof Error) {
        // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
        console.log('An error occurred:', err.error.message);
      }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
        console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
      }       
    });
  }

  ngOnInit() {

  }

}

this.http.post(this.urlApi+'show_data.php',data)    

<?php
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: Content-Type,X-Custom-Header'); 
header('Content-type: application/json');
//require_once("dbconnect.php");
$jsonData = array();	
if($_SERVER['REQUEST_METHOD'] == "GET") {
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS"){
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "POST"){
	$json = file_get_contents('php://input');
	$postData = json_decode($json, TRUE);
/*	$mysqli->query(
	"
	INSERT INTO tbl_data SET 
	data_text='".$postData['fullname']."'
	"
	);	*/
	echo json_encode(array(
		"statusCode"=>"200 OK",
		"statusMessage"=>"Successful"	
	));
}else{
    header("HTTP/1.1 403 Access Forbidden");
	echo json_encode(array(
		"statusCode"=>"403 Access Forbidden",
		"statusMessage"=>"Fail"
	));
}
?>

echo json_encode(array(
    "statusCode"=>"200 OK",
    "statusMessage"=>"Successful",
    "postData"=>$json
));

<p>  register works!</p>
<pre>{{ responseValue | json }}</pre>
<pre>{{ registForm.value | json }}</pre>
<form (ngSubmit)="onSubmit(registForm)" #registForm="ngForm" novalidate>
  <div class="form-group row">
    <label for="fullname" class="col-3 col-form-label text-right">
        ชื่อ นามสกุล
    </label>
    <div class="col-6">
      <input type="text" class="form-control is-invalid" ngModel #fullname="ngModel" name="fullname" id="fullname" 
      [class.is-valid]="fullname.valid" [class.is-invalid]="!fullname.valid" 
      placeholder="Fullname" required>
      <div class="invalid-feedback">
        Please provide a valid Fullname.
      </div>      
    </div>
    <div class="offset-3"></div>
  </div>  
  <div class="form-group row">
    <label for="email" class="col-3 col-form-label text-right">
        อีเมล
    </label>
    <div class="col-6">
      <input type="email" class="form-control is-invalid" ngModel #email="ngModel" name="email" id="email" 
      [class.is-valid]="email.valid" [class.is-invalid]="!email.valid" 
      placeholder="Email" required>
      <div class="invalid-feedback">
        Please provide a valid Email.
      </div>           
    </div>
    <div class="offset-3"></div>
  </div>    
  <div class="form-group row">
    <div class="col-3 text-right">เพศ</div>
    <div class="col-9">
        <label class="custom-control custom-radio">
          <input id="radio1" ngModel #gender="ngModel" name="gendar" value="ชาย" type="radio" 
          [class.is-invalid]="!gender.valid" 
          class="custom-control-input" required>
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">ชาย</span>
        </label>
        <label class="custom-control custom-radio">
          <input id="radio2" ngModel #gender="ngModel" name="gendar" value="หญิง" type="radio" 
          [class.is-invalid]="!gender.valid" 
          class="custom-control-input" required>  
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">หญิง</span>
        </label>      
    </div>
  </div>   
  <div class="form-group row">
    <div class="col-3 text-right">ความสนใจ</div>
    <div class="col-9">
        <div class="custom-controls-stacked">
          <label *ngFor="let hobby of hobbies;let i=index;" class="custom-control custom-checkbox">
            <input type="checkbox" ngModel name="hobby_{{i}}" [value]="hobby" class="custom-control-input">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">{{ hobby }}</span>
          </label>          
        </div>
    </div>
  </div>     
  <div class="form-group row">
    <label for="address" class="col-3 col-form-label text-right">
        ที่อยู่
    </label>
    <div class="col-7">
      <textarea class="form-control is-invalid" ngModel #address="ngModel" name="address" id="address" rows="3" 
      [class.is-valid]="address.valid" [class.is-invalid]="!address.valid" 
      placeholder="Address" required></textarea>
      <div class="invalid-feedback">
        Please provide a valid Address.
      </div>        
    </div>
    <div class="offset-2"></div>
  </div>    
  <div class="form-group row">
    <label for="province" class="col-3 col-form-label text-right">
        จังหวัด
    </label>
    <div class="col-9">
      <select class="custom-select is-invalid" ngModel #province="ngModel" name="province" id="province" 
      [class.is-valid]="province.valid" [class.is-invalid]="!province.valid" 
      required>
        <option value="">เลือกจังหวัด</option>
        <option *ngFor="let province of provinces" [value]="province">
          {{ province }}</option>
      </select>
      <div class="invalid-feedback">
        Please provide a valid Province.
      </div>         
    </div>
  </div>     
  <div class="form-group row">
    <label for="zipcode" class="col-3 col-form-label text-right">
        รหัสไปรษณีย์
    </label>
    <div class="col-3">
      <input type="text" class="form-control is-invalid" 
      ngModel #zipcode="ngModel" name="zipcode" id="zipcode" 
      [class.is-valid]="zipcode.valid" [class.is-invalid]="!zipcode.valid" 
      placeholder="Zip Code" required>
      <div class="invalid-feedback" [hidden]="zipcode.valid">
        Please provide a valid Zip Code.
      </div>        
    </div>
    <div class="offset-6"></div>
  </div> 
  <div class="form-row">
    <div class="col-9 offset-3">
      <button type="submit" [disabled]="!registForm.valid" class="btn btn-primary">
	  สมัครสมาชิก</button>
    </div>
  </div>    
</form>
<br>

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  // selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  public provinces:string[] = ['กรุงเทพฯ','นนทบุรี'];
  public hobbies:string[] = ['ออกกำลังกาย','อ่านหนังสือ'];
  public urlApi:string = "http://localhost/demo/";
  public responseValue:any;  

  constructor(
    private http:HttpClient,
    private route: ActivatedRoute,
    private router:Router
  ) { }  

  onSubmit(f:any){
    let data = f.value;
    this.http.post(this.urlApi+'show_data.php',data)    
    .subscribe(result =>{
      this.responseValue = result;
      console.log(result);
    },
    ( err:HttpErrorResponse ) => {
      // กรณี error
      if (err.error instanceof Error) {
        // กรณี error ฝั่งผู้ใช้งาน หรือ การเชื่อมต่อเกิด error ขึ้น
        console.log('An error occurred:', err.error.message);
      }else{ // กรณี error ฝั่ง server ไม่พบไฟล์ ,server error 
        console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
      }       
    });
  }

  ngOnInit() {

  }

}