ionic3 输入框获取值的方法

最新推荐文章于 2022-06-15 17:01:19 发布

原创最新推荐文章于 2022-06-15 17:01:19 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input值

ionic与angular 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Ionic框架中获取input输入框数据的两种常见方法：使用#变量名和angular双向绑定。前者获取的是HTMLInputElement对象，需通过.value访问实际值；后者则直接绑定变量，便于直接操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用ionic的时候，会发现有些方法和用html来开发还是有一点区别的，在获取input框内的数据方式有2种，具体见一下代码。

1、使用#变量名的方式

注意函数的传值，以及参数类型，获取值的语句。

这种方式是HTMLInputElement，故获取到的值不是一个纯粹的值，而是一个输入的对象元素，需要进一步通username.value

来获取我们需要的输入框内的内容。

<ion-input type="text"  placeholder="请输入账号" #username></ion-input>
<ion-input type="password" placeholder="请输入密码" #password></ion-input>

<button ion-button block color="primary" (click)="login(username, password)">
      登录
    </button>

login(username: HTMLInputElement, password: HTMLInputElement) {
   if (username.value == "" || password.value == "") {
      this.presentToast("middle", "error", "账户或密码不能为空");
    } else if((AppConfig.USERNAME==username.value)&&(AppConfig.PASSWORD==password.value) ){
      AppConfig.loginState = true;
      this.checkRemember(username, password);  //保存用户信息
      this.navCtrl.push(GuidePage);
    }
    else {
      alert("账户或密码错误！");

    }

}

2、使用angular双向绑定的方式

这种方式直接绑定的是一个变量，可以直接获取我们需要的值，通过改变这个变量，达到改变我们需要的值的目的。

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


login() {
    if (this.username == "" || this.password == "") {
      this.presentToast("middle", "error", "账户或密码不能为空");
    }
    else {
      this.navCtrl.push(GuidePage);
    }
}