ionic getting textbox value

Question

Hi I'm new to ionic and I have the following html and js code. I am trying to get the value of user input on textbox upon clicking on the button. (If possible, I would like to store it into an object or a local cache so that it could be use throughout the same session)

<ion-navbar *navbar hideBackButton>
     <ion-title>Welcome</ion-title>
</ion-navbar>

<ion-content>

<ion-list>

    <ion-item>
        <ion-label floating>Please enter a nickname</ion-label>
        <ion-input type="text" value=""></ion-input>
    </ion-item>

</ion-list>

<div padding>
    <button (click)="login()" primary block>Continue</button>
</div>

next my .js code

 import {Component} from "@angular/core";
 import {MenuController, NavController, Alert} from "ionic-angular";
 import {Index} from "../index/index";

 @Component({
    templateUrl: 'build/pages/login/login.html'
 })
 export class Login {
    static get parameters() {
        return [[MenuController], [NavController]];
    }

 constructor(menu, nav) {
        this.menu = menu;
        this.menu.swipeEnable(false);

        this.nav = nav;
    }

    login() {
        let alert = Alert.create({
        title:      'You have entered',
        message:    'Hello',
        buttons:    [
    {
      text: 'Cancel',
      handler: () => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Ok',
      handler: () => {
        console.log('Ok clicked');

                    console.log(getElementById('nickname'));

                    // this.menu.swipeEnable(true);
                    // this.nav.pop(Login);
                    // this.nav.setRoot(Index);
      }
    }
  ]
    });

    this.nav.present(alert);
}
 }

Answer 1

I am not sure about ionic2 but in ionic 1 we can do like below:

Here is an example to store the value of use input text into and object

<input type="text" ng-model="username">
<input type="text" ng-model="password">
<button class="button"ng-click="login(username,password)"> submit</button>

in your js file

$scope.login= function(username,password){
   console.log(username);
   console.log(password);
var loginUser = {
     "username":username,
     "password":password
};
console.log(loginUser);

check this answer it always work for me.

Answer 2

Use this:

<input type="text" name="input name" ng-model="variable-to-bind" />

You can access variable-to-bind from controller using $scope .

For example:.

• In your case variable-to-bind is username, you can access it like $scope.username

Answer 3

Ionic works with angular which has two way binding as its core principal. There are lots of way to accomplish this but one way is to set a model of an html item. So if you set your input to have an ng model

<ion-input type="text" value="" [(ngModel)]="inputName"></ion-input>

and then in your controller(class) you'll have

this.inputName;

It will hold the value changes from html.