频道栏目
首页 > 程序开发 > 移动开发 > 其他 > 正文
Ionic 2基础知识之用户输入
2017-03-08 09:14:03         来源:u014072600的博客  
收藏   我要投稿

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

使用[(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);
  }
}
点击复制链接 与好友分享!回本站首页
上一篇:常见对话框
下一篇:Opencv去高光或镜面反射
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站