1. 程式人生 > >ionic 獲取input的值

ionic 獲取input的值

lin pla click console 參數 使用 輸入密碼 tex 單選按鈕的值

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的值