Ionic 2基础知识之用户输入

https://blog.csdn.net/u014072600/article/details/60776177

很多时候，我们都需要从用户收集一些数据，比如用户名、密码、收货地址或搜索关键词等等，这时，就需要用户在模板页面上进行输入。这里，我们学习两种处理用户输入的方法。

使用[(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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

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);
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

使用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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

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);
  }
}