第九课：用户输入

不是所有的移动应用都要求用户输入，但是大部分都需要。在某些时候，我们需要搜集用户数据。可能是一些状态更新用到的文本，他们的名字和收货地址，搜索条件，他们待办列表的标题等等。
不管这些数据是什么，他都需要用户在模板中输入。为了明确起见，在Ionic 2中我们可以通过以下代码来创建一个表单：

<ion-list>
    <ion-item>
        <ion-label>Username</ion-label>
        <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label>Password</ion-label>
        <ion-input type="password"></ion-input>
    </ion-item>
</ion-list>

以上代码会生成一个简单的登录表单，效果是这样的：

这个登录框允许用户在输入框内输入一些信息。但是，我们需要知道用户在我们的.html中输入了什么然后在.ts类中使用。本课中我们将讨论一些不同的达成方式。

双向数据绑定

如果你之前用过Ionic 1的话，那么你应该非常熟悉这个概念，如果没有的话，别担心，因为这个改变非常直白。双向数据绑定实际上就是将模板里的一个输入域和类里面的变量值链接起来。以下范例：
模板：

<ion-input type="text" [(ngModel)]="myValue"></ion-input>

类：

myValue: string;
constructor(){
}

如果我们改变模板里的，然后类定义里的 this.myValue 会被更新到这个值。如果我们改变类里面的 this.myValue ，模板里面对于的输入域会自动更新对应的值。通过 ngModel 将两个值绑在一起，一个改变的时候，另一个随之改变。
假设我们在模板里有一个提交按钮：

<ion-input type="text" [(ngModel)]="myValue"></ion-input>
<button ion-button (click)="logValue()">Log myValue!</button>

当用户点击按钮是时候我们将他们输入的值打印到控制台。由于按钮点击的时候会调用logValue函数，我们需要在类定义里面添加如下：

logValue(){
    console.log(this.myValue);
}

不管你在输入框里面输入了什么，这个函数都会拿到然后输出到控制台，当然你也可以用这些数据干更有意义的事情。这是一个非常方便的操作输入的方法，因为我们不需要去担心函数的传入值，我们直接去拿当前的值就可以了。
这在有大量的输入框的时候会显得有点笨拙，所以也不会永远是完美选择。当用于处理复杂表单的时候，我们还有另一个选择，现在就来看另一个选择。

Form Builder

Form Builder是Angular 2提佛那个的一个服务，可以用来更简单的处理表单。Form Builder可以做的事情不止这些，但是他最简单的目的是允许你同时管理大量输入域同时提供了更简单的方法来验证用户输入（例如，是否输入了有效的邮件地址）。
想要使用Form Builder的话，需要先导入（同时导入FormGroup）然后注入到你的构造器，如下：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
    templateUrl: 'my-details.html',
})
export class MyDetailsPage {
    constructor(public formBuilder: FormBuilder) {
    }
}

请注意，此处也导入了Validators，用于与Form Builder验证用户输入。我们来快速了解一下如何使用Form Builder创建一个表单。这个方法最重要的不同是你的输入需要放到定义好了formGroup熟悉的

<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 type="submit">Save Form</button>
</form>

this.myForm = formBuilder.group({
    field1: [''],
    field2: [''],
    field3: ['']
});

this.myForm = formBuilder.group({
    field1: ['', Validators.required],
    field2: ['', Validators.required],
    field3: ['']
});

saveForm(event){
    event.preventDefault();
    console.log(this.myForm.value);
}