码迷,mamicode.com
首页 > 其他好文 > 详细

ionic 获取input的值

时间:2018-09-03 19:23:08      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:remember   登录   直接   any   内容   element   账号   pass   name   

1、参数传递法

例子:获取input框内容

这里有个独特的地方,直接在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文件中

 

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

 

2、双向绑定法

这种方法比较通用,但是需要在ts中定义对应的变量

例子1:获取input框内容

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

 

 

例子2:获取单选按钮的值

在html页面中
 

 <ion-toggle [(ngModel)]="rememberName"></ion-toggle>

 

在ts文件中
  

rememberName: any;
  login() {
    console.log(this.rememberName);
  }

 

ionic 获取input的值

标签:remember   登录   直接   any   内容   element   账号   pass   name   

原文地址:https://www.cnblogs.com/yc-c/p/9580000.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!