1.参数传递法

直接在input处使用 #定义参数的name值,注意在ts中参数的类型

html页面:

<ion-input type="text" placeholder="请输入账号" #username></ion-input>
<ion-input type="password" placeholder="请输入密码" #password></ion-input>
<button (click)="login(username, password)">登录</button>

ts文件中(HTMLInputElement类型)

login(username: HTMLInputElement, password: HTMLInputElement) {
    console.log(username.value)
    console.log(password.value)
  }

2.双向数据绑定

html页面:

<ion-input type="text" placeholder="请输入账号" [(ngModel)]="username"></ion-input>
<ion-input type="password" placeholder="请输入密码" [(ngModel)]="password"></ion-input>
<button (click)="login()">登录</button>

ts文件中:

username: string;
password: string;
login() {
 console.log(this.username);
 console.log(this.password);
}

ionic获取表单input的值的两种方法的更多相关文章

  1. PHP获取MySql新增记录ID值的3种方法

    From: http://www.jb51.net/article/51473.htm 这篇文章主要介绍了PHP获取MySql新增记录ID值的3种方法,一般使用PHP自带函数mysql_insert_ ...

  2. 选中没有选中的复选框,匹配含有某个字符串的正则,json取值的两种方法,把变量定义在外面跟里面的区别

    一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...

  3. javascript获取json对象的key名称的两种方法

    javascript获取json对象的key名称的两种方法 数据处理中,你可能接收到一个不确定内容格式的json对象,然后要把key的值提取出来.今天试过两种可以提取json key的方法,均可以正常 ...

  4. JMeter接口测试-提取动态列表最后一个值的两种方法

    前言 在用JMeter做接口测试时,我们经常会遇到,一个接口返回一个json串,在这个json串中,某个节点的值是一个列表,而且这个列表的长度是动态变化的.今天我们来学习两种提取动态列表最后一个值的两 ...

  5. javascript获取表单的各项值

    何谓表单? 表单是html页面中负责数据采集功能的部件,它往往由三个部分组成: 表单标签:<form></form> 用于声明表单的范围,位于表单标签中的元素将被提交.属性有m ...

  6. Java代码中获取配置文件(config.properties)中内容的两种方法

    方法千千万,本人暂时只总结了两种方法. (1)config.properties中的内容如图 在applicationContext.xml中配置 <!-- 引入配置文件 --> < ...

  7. js jquery, jquery-ui 获取form各种表单input的值?

    如何获取? make up (for): 弥补, 补偿, her beaty cannot make up for her stu'pidity. five Basic laws of human s ...

  8. 表单input中录入资料的检查方法及示例

    本文内容 表单录入信息的检查原则 常见检查的三种方法 示例     输入框有字符长度的限制     输入框有输入字符个数范围的限制 知识补给--检查方式的介绍     输入框只可(或不可)输入数 ...

  9. Selenium获取input值的两种方法:WebElement.getAttribute("value")和WebElement.getText()

    在页面元素的定位中,有时候需要获取到元素的页面显示值,用来作为断言.例如,我需要获取email的值"amy1111@xxx.com". <input class=" ...

随机推荐

  1. [Swift]LeetCode508. 出现次数最多的子树元素和 | Most Frequent Subtree Sum

    Given the root of a tree, you are asked to find the most frequent subtree sum. The subtree sum of a ...

  2. [Swift]LeetCode641. 设计循环双端队列 | Design Circular Deque

    Design your implementation of the circular double-ended queue (deque). Your implementation should su ...

  3. [Swift]LeetCode914.一副牌中的X | X of a Kind in a Deck of Cards

    In a deck of cards, each card has an integer written on it. Return true if and only if you can choos ...

  4. Kubernetes---Pod控制器

    Pod作为kubernetes的最基本单元,它的控制器有以下这些 Pod的控制器: 1,  RC ( ReplicationController): 2, RS(ReplicaSet) : 3, De ...

  5. python网络-TFTP客户端开发(25)

    一. TFTP协议介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议) 是TCP/IP协议族中的一个用来在客户端与服务器之间进行简单文件传输的协议 特点: ...

  6. centos7中安装、配置、验证、卸载redis

    本文介绍在centos7中安装.配置.验证.卸载redis等操作,以及在使用redis中的一些注意事项. 一 安装redis 1 创建redis的安装目录 利用以下命令,切换到/usr/local路径 ...

  7. 今天俺要说一说工厂方法模式(Factory)

    前言;工厂方法模式又叫做工厂模式,它是23个设计模式中的一个,它解决的还是在软件设计中创建对象的问题,它可以更好的解决用户需求的变化. 问题;在简单工厂模式中,我们将实例化的对象全部放于Factory ...

  8. Android:剖析源码,随心所欲控制Toast显示

    前言 Toast相信大家都不会陌生吧,如果对于Toast不甚了解,可以参考我的上一篇博客<Android:谈一谈安卓应用中的Toast情节>,里面有关于Toast基础比较详细的介绍.但是如 ...

  9. 简单的SQL注入之3

    Topic Link http://ctf5.shiyanbar.com/web/index_3.php 1)测试正确值submit:1 测试目标和对象要明确: 2)单引号测试(判断存在字符型注入&a ...

  10. ASP.NET Core 2.1 : 十三.httpClient.GetAsync 报SSL错误的问题

    不知什么时候 ,出现了这样的一个奇怪问题,简单的httpClient.GetAsync("xxxx")居然报错了.(ASP.NET Core 系列目录) 一.问题描述 把原来的程序 ...