ionic 获取input的值

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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