Get Input from ion-input in Ionic

Question

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!

Sampath · Accepted Answer · 2017-08-06 06:00:14Z

5

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

Forms with [(ngModel)]
Forms with FormBuilder
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.

answered Aug 6, 2017 at 6:00

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

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

3 Comments

Abhishta Gatya Over a year ago

in this case, what would you recommend that I use to get the input?

Sampath Over a year ago

I would like to recommend the Forms with FormBuilder method.That method is also called reactive forms method.But you can use Forms with [(ngModel)] method too.It is some what old AngularJS kind of method.

Sampath Over a year ago

If you have any issues about those methods please let me know.

Jakegarbo · Accepted Answer · 2017-08-06 09:45:45Z

1

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>

answered Aug 6, 2017 at 9:45

Jakegarbo

1,31110 silver badges21 bronze badges

1 Comment

Abhishta Gatya Over a year ago

Thank you for the solution :)

Collectives™ on Stack Overflow

Get Input from ion-input in Ionic

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related