ionic获取表单input的值的两种方法

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

猜你喜欢

转载自www.cnblogs.com/longailong/p/10491013.html
今日推荐