การส่งค่าจาก Form ด้วย ngModel FormBuilder และ Template ใน Ionic

ionic generate page login --no-module

<ion-header>
    <ion-navbar color="danger">
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>    
      <ion-title>Login</ion-title>
    </ion-navbar>
  </ion-header>
   
  <ion-content padding>
    <div padding text-center>
      <h3>Please Log In</h3>
    </div>   
    <form>
      <ion-list>
        <ion-item>
          <ion-label floating>Username</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>
      
        <ion-item>
          <ion-label floating>Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
      </ion-list>
      <div>
        <button type="submit" block ion-button color="danger">Login</button>
      </div>     
    </form>    
  </ion-content>

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

}

<ion-item>		
  <ion-label floating>Username</ion-label>
  <ion-input type="text" [(ngModel)]="user.username" name="username"></ion-input>
</ion-item>

<ion-item>		
  <ion-label floating>Username</ion-label>
  <ion-input type="text" [(ngModel)]="user.username" [ngModelOptions]="{standalone: true}"></ion-input>
</ion-item>

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

// กำหนดรูปแบบของชนิดข้อมูลผ่าน interface
interface UserLogin{
  username:string,
  password:string
}

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  public user:UserLogin; // กำหนดตัวแปร

  constructor(public navCtrl: NavController, public navParams: NavParams) {
	// กำหนดค่าเริ่มต้นให้กับตัวแปร 
    this.user = {
      username:'',
      password:''
    }
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
  
  // ฟังก์ชั่นส่งค่าเมื่อ submit ฟอร์ม
  doLogin(){
    console.log(this.user);
  }  

}

  <form (ngSubmit)="doLogin()">
    <ion-list>
      <ion-item>
        <ion-label floating>Username</ion-label>
        <ion-input type="text" [(ngModel)]="user.username" name="username"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Password</ion-label>
        <ion-input type="password" [(ngModel)]="user.password" name="password"></ion-input>
      </ion-item>
    </ion-list>
    <div>
      <button type="submit" block ion-button color="danger">Login</button>
    </div>
  </form>

{username: "demo", password: "test"}

  <form #form="ngForm" (ngSubmit)="doLogin(form)" novalidate>
    <ion-list>
      <ion-item>
        <ion-label floating>Username</ion-label>
        <ion-input type="text" required [(ngModel)]="user.username" name="username"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Password</ion-label>
        <ion-input type="password" required [(ngModel)]="user.password" name="password"></ion-input>
      </ion-item>
    </ion-list>
    <div>
      <button type="submit" block ion-button color="danger">Login</button>
    </div>
  </form>

{username: "demo", password: "test"}

{username: "demo", password: ""}

  doLogin(form:any){
	// ทดสอบดูค่าต่างๆ ที่ส่งมาจากฟอร์ม 
    console.log(form);
    console.log(form.value);
    console.log(form.valid);
  }

<button type="submit" [disabled]="!form.valid" block ion-button color="danger">Login</button>

  <form [formGroup]="user" (ngSubmit)="doLogin()">
    <ion-list>
      <ion-item>
        <ion-label floating>Username</ion-label>
        <ion-input type="text" formControlName="username"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Password</ion-label>
        <ion-input type="password" formControlName="password"></ion-input>
      </ion-item>
    </ion-list>
    <div>
      <button type="submit" [disabled]="!user.valid" block ion-button color="danger">Login</button>
    </div>
  </form>

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  public user:FormGroup;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public formBuilder: FormBuilder 
  ) {
    this.user = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['',Validators.required]
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  doLogin(){
    console.log(this.user.value);
    console.log(this.user.valid);
  }

}