CODEWITHSUNDEEP
angulartypescriptionic2
Abhishta Gatya
Abhishta Gatya

Reputation: 913

Get Input from ion-input in Ionic

I don't know how I can get input from ion-input and console.log it out. Every time I did it, it always outputted as undefinedin the console. Is there a better way to do it? I'm a complete newbie to the Ionic Framework and Angular.

Here is my code :

src/pages/addtask/addtask.html


<ion-header>
  <ion-navbar primary>
    <ion-title>
      Add Task
    </ion-title>

  </ion-navbar>
</ion-header>

<ion-content>

  <ion-list>

    <ion-item>
      <ion-label floating> Task </ion-label>
      <!-- Get Input from below -->
      <ion-input type="text" [(ngModel)]="task" id="task"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Priority</ion-label>
      <ion-select [(ngModel)]="priority" id="pri">
        <ion-option value="High">High</ion-option>
        <ion-option value="Normal">Normal</ion-option>
        <ion-option value="Low">Low</ion-option>
      </ion-select>
    </ion-item>

    <div padding>
      <button ion-button color="greed" full round (click)="post()">Save</button>
    </div>


  </ion-list>

</ion-content>

src/pages/addtask/addtask.ts


import { Component } from '@angular/core';
import { NavController, IonicPage, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { Storage } from '@ionic/storage'


@Component({
  selector: 'page-task',
  templateUrl: 'addtask.html'
})

export class AddTask {

  // post() outputs undefined undefined in the console

  post(){
    let tasksValue = (document.getElementById('task') as HTMLInputElement).value;
    let priVal = (document.getElementById('pri') as HTMLInputElement).value;
    console.log(tasksValue, priVal);
  }

  constructor(public navCtrl: NavController, private storage: Storage) {

  }

  close(){
    this.navCtrl.pop()
  }

}

Thanks in advance!

Upvotes: 1

Views: 10858

Answers (2)

Jakegarbo
Jakegarbo

Reputation: 1301

You can try this.

TS

.....

export class AddTask {

 //first declare variable for your input.
task:any;
pri:any;

post(){
   console.log('task',this.task);
   console.log('pri',this.pri)
   } 
 }

HTML

<ion-item>
      <ion-label floating> Task </ion-label> 
      <ion-input type="text" [(ngModel)]="task"></ion-input>
    </ion-item>

  <ion-item>
      <ion-label>Priority</ion-label>
      <ion-select [(ngModel)]="pri">
        <ion-option value="High">High</ion-option>
        <ion-option value="Normal">Normal</ion-option>
        <ion-option value="Low">Low</ion-option>
      </ion-select>
    </ion-item>

    <div padding>
      <button ion-button  full (click)="post()">Save</button>
    </div>

Upvotes: 1

Sampath
Sampath

Reputation: 65860

You firstly know how to handle Ionic forms.There are 3 ways of handling it.

  1. Forms with [(ngModel)]

  2. Forms with FormBuilder

  3. Forms with Templates

Please read this official doc for learning it deeply.

On your example above you have not followed any one of above methods.That was the reason where it doesn't work.

Upvotes: 5

Related Questions