Ionic2表单

http://ionicframework.com/docs/v2/resources/forms/

Angular2中的表单有一点变化，但是更好了。借助新的Forms模块，你的程序可以使用比Angular1中更复杂的表单。看一下三个不同的关于表单的例子。

使用[(ngModel)]的表单

简单的表单绑定到一个对象并把它传递给我们的类。

优点：简单的API，与Angular1类似

缺点：不便于编程控制，很难进行单元测试

import { Component } from '@angular/core';

@Component({
    template: `
        <form (ngSubmit)="logForm()">
            <ion-item>
                <ion-label>Todo</ion-label>
                <ion-input type="text" [(ngModel)]="todo.title" name="title"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>Description</ion-label>
                <ion-textarea [(ngModel)]="todo.description" name="description"></ion-textarea>
            </ion-item>
            <button ion-button type="submit" block>Add Todo</button>
        </form>
    `,
})

export class FormsPage {
    todo = {}
    logForm() {
    console.log(this.todo)
    }
}

这与Angular1/Ionic1中的表单非常类似，就像大多数其他的开发者所做的一样。

注意：如果在一个form标签内使用ngModel，必须提供一个name属性。如果没有的话，必须在ngModelOptions中设置standalone。

<!-- with name set -->
<ion-item>
    <ion-label>Todo</ion-label>
    <ion-input type="text" [(ngModel)]="todo.title" name="title"></ion-input>
</ion-item>

<!-- or with standalone set to true -->
<ion-item>
    <ion-label>Todo</ion-label>
    <ion-input type="text" [(ngModel)]="todo.title" [ngModelOptions]="{standalone: true}"></ion-input>
</ion-item>

使用FormBuilder的表单

表单将会在我们的类中创建。表单的逻辑也在类中完整的实现。

优点：方便单元测试

缺点：必须引入FormBuilder

import { Component } from '@angular/core';
import {Validators, FormBuilder } from '@angular/forms';

@Component({
    template: `
        <form [formGroup]="todo" (ngSubmit)="logForm()">
            <ion-item>
                <ion-label>Todo</ion-label>
                <ion-input type="text" formControlName="title"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>Description</ion-label>
                <ion-textarea formControlName="description"></ion-textarea>
            </ion-item>
            <button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
        </form>
    `
})

export class FormsPage {

    constructor(private formBuilder: FormBuilder) {}
    ionViewLoaded() {
        this.todo = this.formBuilder.group({
            title: ['', Validators.required],
            description: [''],
        });
    }
    logForm(){
        console.log(this.todo.value)
    }
}

这种方式将大部分的表单逻辑放在组件的类里。这样测试起来就简单了，表单也变得更可读。

使用模板的表单

表单不是由类中的对象驱动，而是由表单本身实际的引用来驱动。

优点：更普通的HTML表单，所有的逻辑都在模板里

缺点：很难测试，模板比较混乱

import { Component } from '@angular/core';

@Component({
    template: `
        <form #form="ngForm" (ngSubmit)="logForm(form)" novalidate>
            <ion-item>
                <ion-label>Todo</ion-label>
                <ion-input type="text" required [(ngModel)]="todo.title" ngControl="title"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>Description</ion-label>
                <ion-textarea [(ngModel)]="todo.description" ngControl="description"></ion-textarea>
            </ion-item>
            <button ion-button type="submit" block>Add Todo</button>
        </form>
    `,
})

export class FormsPage {
    todo = {
        title: '',
        description: ''
    };
    logForm(form) {
        console.log(form.value)
    }
}

这和使用ngModel的表单很相似，但没有使用实际的model，而是使用了表单本身的引用。在第一个例子中，所有的值都直接来自名为todo的model。在使用模板驱动的表单里，值是直接从表单本身取得的。

附言

虽然所有的方法都可以用来在Ionic2中创建表单，但我们强烈推荐使用FormBuilder API，这对单元测试来说是很有利的。