Ionic 2 get ion-input value

Question

I am creating a login with ionic 2. Please don't just answer "you just need to add the [(ngModules)]-attribute". If you think, this is the solution, please explain it why. Explain it, like you would do it to a child.

My Code in login.ts:

 import {Component} from '@angular/core';
 import {IonicPage, NavController, NavParams, MenuController} from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  password: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) {
    this.menu.enable(false, "");
  }

  login() {
    alert(this.password);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
}

The Code in login.html

<ion-content padding id="login-dialog">
  <ion-list inset>

    <ion-item no-padding>
      <ion-label color="primary">
        <ion-icon name="person"></ion-icon>
      </ion-label>
      <ion-input type="text" placeholder="Username"></ion-input>
    </ion-item>

    <ion-item no-padding>
      <ion-label color="primary">
        <ion-icon name="lock"></ion-icon>
      </ion-label>
      <ion-input type="password" placeholder="Password"></ion-input>
    </ion-item>
    <button ion-button full color="primary" (click)="login()">Login</button>

  </ion-list>

</ion-content>

If you already know you need NgModule for this, and you know it works but need further explanation on how does it works behind the scenes i sugest you reading the docs angular.io/docs/ts/latest/guide/ngmodule.html .Be cause there's no need to answer a question that you know the answer. — Gabriel Barreto
– Gabriel Barreto, Commented May 15, 2017 at 20:54
So your Tutorial did not help me. But i found an other one: joshmorony.com/… — Björn Pfoster
– Björn Pfoster, Commented May 15, 2017 at 21:56

ashley · Accepted Answer · 2017-05-17 16:26:14Z

The above code will not work because you are not binding your input element to any property in the login component. You have to use angular data binding for that.

https://angular.io/docs/ts/latest/guide/template-syntax.html

Please change your code to the below.

<ion-item no-padding>
      <ion-label color="primary">
        <ion-icon name="lock"></ion-icon>
      </ion-label>
      <ion-input [(ngModel)]="password" type="password" placeholder="Password"></ion-input>
    </ion-item>

So whatever you type in the input will update the model (the property passsword you defined in your component). It will then alert the passsword.

Collectives™ on Stack Overflow

Ionic 2 get ion-input value

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related