Ionic2学习笔记(7):Input

本文介绍在Ionic2中实现登录界面的两种数据获取方法:使用[(ngModel)]直接获取输入值和利用FormBuilder构建表单。通过实例演示如何在控制台打印获取到的用户名和密码。

作者:Grey

原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html

     

   

我们先来看一个简单的输入用户名和密码点击登录的界面:

   

  • 进入项目目录:cd MyFirstApp
  • 修改主页代码:

    app/pages/home/home.html

    预览一下效果:ionic serve -l

我们有两种方式来获取输入的数据:

   

  • 第一种:通过[(ngModel)]来获取参数值,修改home.html的代码为如下形式

    在home.ts增加一个获取用户名和密码并在浏览器的控制台打印出来:

    运行程序:ionic serve -l, 并在用户名和密码框中分别输入相关信息,点击登录按钮,打开浏览器控制台,即可看到获取的信息

  • 第二种方式,采用Form Builder,修改home.html

    在html.ts中,增加如下代码:

    运行:ionic serve -l

    打开Chrome的控制台,可以查看获取的数据:

   

   

------

上一篇:Ionic2学习笔记(6):Navigation

下一篇:Ionic2学习笔记(8):Local Storage& SQLite

转载于:https://www.cnblogs.com/greyzeng/p/5554610.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值