文档章节

Ionic 2基础知识之用户输入

昌伟兄
 昌伟兄
发布于 2017/03/07 18:58
字数 460
阅读 74
收藏 0

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

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

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

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

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

© 著作权归作者所有

昌伟兄
粉丝 14
博文 12
码字总数 11956
作品 0
楚雄
后端工程师
私信 提问
nodejs + cardova + ionic安装环境(持续更新)

安装环境: Ubuntu 14.04 64-bit NodeJs安装 官网 https://nodejs.org 速度太慢 国内镜像: https://npm.taobao.org/dist 下对应版本即可 下载: node-v4.2.1-linux-x64.tar.gz 解压 查看bin目录...

黑狗007
2015/10/14
1K
0
混合式app ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)

1、ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃 ngCordova,将主流的Cordova API或者Cordo...

湖南小影
2017/04/10
0
0
Ionic Framework 学习

编者注 由于钻研服务器,前端一直使用Bootstrap,当然也非常好用。但是打包跨平台,还有现代的CLI工具都不太会用。近期发现Ionic已经可以脱离Angular也能够实施在Vue框架下,这个将会提供非常...

抢小孩糖吃
02/01
115
0
使用 Ionic 2、MongoDB 和 Node 构建一个 Review App

在整个的网页和移动开发历程中,你也许已经听说过 MEAN 技术栈, 它 (只是听起来不起眼) 所代表的是 MongoDB, Express.js,Angular, 以及 Node.js。 将所有这些技术综合到一起,就能让你创造...

昌伟兄
2017/01/23
2.8K
1
ionic2.0 beat37 安装

(1)首先安装nodejs node 下载地址:https://nodejs.org/dist/latest-v5.x/ 下载里面的node-v5.12.0-x64.msi 或者node-v5.12.0-x86.msi 区别是32位机器和64位机器。 下载后点击下一步一步步...

tianyawhl
2016/09/20
22
0

没有更多内容

加载失败,请刷新页面

加载更多

SDKMAN推荐一个好

是在大多数基于Unix的系统上管理多个软件开发工具包的并行版本的工具。它提供了一个方便的命令行界面(CLI)和API来安装,切换,删除和列出sdk相关信息。以下是一些特性: By Developers, fo...

hotsmile
39分钟前
8
0
什么是 HDFS

是什么? HDFS 是基于 Java 的分布式文件系统,允许您在 Hadoop 集群中的多个节点上存储大量数据。 起源: 单机容量往往无法存储大量数据,需要跨机器存储。统一管理分布在集群上的文件系统称...

Garphy
42分钟前
5
0
一起来学Java8(四)——复合Lambda

在一起来学Java8(二)——Lambda表达式中我们学习了Lambda表达式的基本用法,现在来了解下复合Lambda。 Lambda表达式的的书写离不开函数式接口,复合Lambda的意思是在使用Lambda表达式实现函...

猿敲月下码
今天
10
0
debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
今天
12
0
aelf Enterprise 0.8.0 beta有奖公测,“Bug奖金计划”重磅开启

2019年9月30日,aelf Enterprise 0.8.0 beta版正式发布。aelf Enterprise 0.8.0 beta是一个完备的区块链系统, 包含完备的区块链系统、开发套件、开发文档、以及配套的基础应用和基础服务。 ...

AELF开发者社区
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部