Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get input text value in ionic

I'm trying to get input text value and store it in a variable named input in ionic. But I tried and failed. Can anyone please tell me what I have faulty done?

This is my HTML

  <ion-content>
  <ion-list>
    <ion-item> 
        <ion-label stacked>display</ion-label>
      <ion-input type="text" text-right id="input" ></ion-input>
    </ion-item>    
  </ion-list>
  </ion-content>

and this is my home.ts in ionic

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    var input=document.getElementById('input').nodeValue;
    document.getElementById('seven').innerHTML=input;
  }
  
}
like image 764
Jananath Banuka Avatar asked Jan 14 '18 19:01

Jananath Banuka


People also ask

How do you find the value of an input in ionic?

whan you need to access on the value of the input, check the value of inputValue. Two-way binding is a combination of both property binding and event binding as it is a continuous synchronization of data/values from presentation layer to component and from component to the presentation layer.

How do you do Autocapitalize in ionic?

If you actually require that the user's keyboard changes to "uppercase mode", that wasn't possible until a while ago, but recent browsers (and Ionic) support a new attribute called autocapitalize which does exactly what you want: Input elements with the autocapitalize attribute set to true will make the virtual ...


2 Answers

Actually you seems to be using angular not angularjs, use [(ngModel)]

 <ion-input type="text" [(ngModel)]="name" text-right id="input" ></ion-input>

and inside the component,

name:string;

so whenever you need the value , you can use.

console.log(this.name);

like image 120
Sajeetharan Avatar answered Sep 18 '22 21:09

Sajeetharan


<ion-content>
  <ion-list>
    <ion-item> 
      <ion-label stacked>display</ion-label>
      <ion-input type="text" text-right id="input" [(ngModel)]="inputValue"></ion-input>
    </ion-item>    
  </ion-list>
</ion-content>

// ===

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    inputValue: string = "";
    constructor(public navCtrl: NavController) {}

    someFunction() {
        // here you can use the 'this.inputValue' and get the value of the ion-input 
    }

}

we use the two way binding the value of ion-input with the class member inputValue,

about ngModel

whan you need to access on the value of the input, check the value of inputValue.

here you can see an exemple I wrote on StackBlitz

Two-way binding is a combination of both property binding and event binding as it is a continuous synchronization of data/values from presentation layer to component and from component to the presentation layer.

Since this is a two way binding we have to use both the brackets - [ ( ) ]. Also ngModel is a directive which is used to bind the data both ways.

like image 29
Ofir G Avatar answered Sep 21 '22 21:09

Ofir G