很多時候，我們都需要從用戶收集一些數據，比如用戶名、密碼、收貨地址或搜索關鍵詞等等，這時，就需要用戶在模板頁面上進行輸入。這里，我們學習兩種處理用戶輸入的方法。

使用[(ngModel)]進行雙向數據綁定

1.新建一個項目，執行下面的命令：
ionic start user_input blank --v2 --skip-npm
2.進入到項目目錄user_input中，安裝所需要的依賴：
cnpm install
3.修改src/pages/home/home.html模板文件，增加一個輸入框和一個提交按鈕，代碼參考如下：

<ion-header>
  <ion-navbar>
    <ion-title>
      用戶輸入
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-input type="text" [(ngModel)]="myInput"></ion-input>
  <button ion-button (click)="logInput()">提交輸入</button>
</ion-content>

4.修改src/pages/home/home.ts類文件，增加logInput()函數，獲得用戶的輸入，代碼參考如下：

import { Component } from '@angular/core';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  myInput:string;
  constructor() {}
  logInput(){
     console.log(this.myInput);
  }
}

使用Form Builder一次處理多個用戶輸入

Form Builder是Angular 2提供的一個服務。使用它可以一次處理多個輸入，而且可以對用戶輸入進行驗證，比如檢查用戶輸入的Email地址是否合法。
1.修改home.html模板文件，添加一個form表單，代碼參考如下：

<ion-header>
  <ion-navbar>
    <ion-title>
      用戶輸入
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <form [formGroup]="myForm" (submit)="saveForm($event)">
    <ion-item>
       <ion-label stacked>Field 1</ion-label>
       <ion-input formControlName="field1" type="text"></ion-input>
    </ion-item>
    <ion-item>
       <ion-label stacked>Field 2</ion-label>
       <ion-input formControlName="field2" type="text"></ion-input>
    </ion-item>
    <ion-item>
       <ion-label stacked>Field 3</ion-label>
       <ion-input formControlName="field3" type="text"></ion-input>
    </ion-item>
    <button ion-button type="submit">提交</button>
  </form>
</ion-content>

2.修改home.ts類文件，對表單初始化，接收用戶提交的數據，代碼參考如下：

import { Component } from '@angular/core';
import { FormBuilder,FormGroup,Validators } from '@angular/forms';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public myForm:FormGroup;
  constructor(public formBuilder:FormBuilder) {
     this.myForm=this.formBuilder.group({
         field1:['',Validators.required],
         field2:[''],
         field3:['']
     });
  }
  saveForm(event){
    event.preventDefault();
    console.log(this.myForm.value);
  }
}