[하이브리드앱 ionic]시작해보기 10 - ion-input 값 가져오기 + 앵귤러

ion-input에 입력된 값을 가져오기

join 회원가입을 예로 들어서 본다면 

 

join.page.html

<div class="login-box">
  <ion-item>
    <ion-label position="floating">이메일 </ion-label>
    <ion-input  [(ngModel)]="joinId" type="email"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">비밀번호 </ion-label>
    <ion-input  [(ngModel)]="joinPass" type="password"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">비밀번호 확인 </ion-label>
    <ion-input  [(ngModel)]="joinPassCheck" type="password"></ion-input>
  </ion-item>
	<ion-button expand="block" fill="solid" class="login-btn" (click)="join()">회원가입</ion-button>
	<a class="link" (click)=presentToast();>비회원으로 이동 </a>
</div>

이렇게 있을때 

ion-input 의 ngModel 을 통해 가져온다.

<ion-input  [(ngModel)]="joinId" type="email"></ion-input>

 

 

[(ngModel)]="joinId"

 

joinId를 이용해 값을 가져올 수 있다.

 

 

join.page.ts

export class JoinPag{
    joinId:any;
    joinPass:any;
    joinPassCheck:any;
    
    constructor(){
    }
    
   join(){
      console.log(this.joinId+'/'+this.joinPass+'/'+this.joinPassCheck);
      this.navCtrl.navigateForward('/triplist');
    }
  }

ngModel로 주어진 값 3개를 선언한 뒤

this.joinId 를 통해 가져올  수 있다.