Ionic 2基础知识之用户输入

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

使用[(ngModel)]进行双向数据绑定

1.新建一个项目，执行下面的命令：
ionic start user_input blank --v2 --skip-npm
2.进入到项目目录user_input中，安装所需要的依赖：
cnpm install
3.修改src/pages/home/home.html模板文件，增加一个输入框和一个提交按钮，代码参考如下：

  
    
      用户输入
    
  


  
  提交输入

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表单，代码参考如下：

  
    
      用户输入
    
  


  

    
       Field 1
       
    
    
       Field 2
       
    
    
       Field 3
       
    
    提交
  

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

转载于:https://my.oschina.net/fcwfcs/blog/853781