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);
}
 }

misha130 · Accepted Answer · 2017-10-04 15:53:14Z

6

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.

edited Oct 4, 2017 at 15:53

answered Jun 7, 2016 at 6:45

misha130

5,7862 gold badges31 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

shin1234 Over a year ago

thanks it worked! may I know why must my ngmodel be in an object?

misha130 Over a year ago

Its not an object in this example. Do you mean why its supposed to be in the controller as a property? If you want you can read about this in angular 1 docs.angularjs.org/tutorial/step_04

shin1234 Over a year ago

thanks! just one more qns! is it possible to get the same name over at the next page?

misha130 Over a year ago

Not with an ng model since every page has its own SCOPE of data. But if you really want to you can pass your data using your NavController like this.nav.push(SecondView, { paramUser: user }); (don't forget to set routing of the navcontroller to make it possible) Read up for more: ionicframework.com/docs/v2/api/components/nav/NavController

Kartiikeya Over a year ago

How to get value,if ion-input is created dynamically using *ngFor

|

Mohan Gopi · Accepted Answer · 2016-06-07 06:49:52Z

2

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.

answered Jun 7, 2016 at 6:49

Mohan Gopi

7,74618 gold badges70 silver badges119 bronze badges

1 Comment

shin1234 Over a year ago

Hi I have tried this however It's not working for my case. Do I need to initialize angular?

Tom · Accepted Answer · 2017-10-15 08:13:45Z

0

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

edited Oct 15, 2017 at 8:13

Tom

1,4073 gold badges21 silver badges30 bronze badges

answered Oct 15, 2017 at 7:08

ganesh

2,3481 gold badge18 silver badges17 bronze badges

Collectives™ on Stack Overflow

ionic getting textbox value

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related