52137

Ionic 2 get ion-input value

Question:

I am creating a login with ionic 2. Please don't just answer "you just need to add the [(ngModules)]-attribute". If you think, this is the solution, please explain it why. Explain it, like you would do it to a child.

My Code in <strong>login.ts</strong>:

import {Component} from '@angular/core'; import {IonicPage, NavController, NavParams, MenuController} from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { password: string; constructor(public navCtrl: NavController, public navParams: NavParams, public menu: MenuController) { this.menu.enable(false, ""); } login() { alert(this.password); } ionViewDidLoad() { console.log('ionViewDidLoad LoginPage'); } }

The Code in <strong>login.html</strong>

<ion-content padding id="login-dialog"> <ion-list inset> <ion-item no-padding> <ion-label color="primary"> <ion-icon name="person"></ion-icon> </ion-label> <ion-input type="text" placeholder="Username"></ion-input> </ion-item> <ion-item no-padding> <ion-label color="primary"> <ion-icon name="lock"></ion-icon> </ion-label> <ion-input type="password" placeholder="Password"></ion-input> </ion-item> <button ion-button full color="primary" (click)="login()">Login</button> </ion-list> </ion-content>

Answer1:

The above code will not work because you are not binding your input element to any property in the login component. You have to use angular data binding for that.

<a href="https://angular.io/docs/ts/latest/guide/template-syntax.html" rel="nofollow">https://angular.io/docs/ts/latest/guide/template-syntax.html</a>

Please change your code to the below.

<ion-item no-padding> <ion-label color="primary"> <ion-icon name="lock"></ion-icon> </ion-label> <ion-input [(ngModel)]="password" type="password" placeholder="Password"></ion-input> </ion-item>

So whatever you type in the input will update the model (the property passsword you defined in your component). It will then alert the passsword.

Recommend

  • apache HTMLUNIT… PROBLEM in handling javascript
  • Spring Security with REST architecture
  • IBM Worklight - How to programmatically hide the splash image
  • Google Street View container inside Shiny Application
  • Apply kurtosis to a distribution in python
  • Detecting typos in JavaScript code
  • Uncaught Reference Input is not defined- @Input() not working in Angular 2
  • Verbose log abbriviations meaning in SVC, scikit-learn
  • Angular UI Router root named view template change from child view
  • double precision error when converting to scientific notation
  • Manage different base layouts in Angular2
  • Incorrect behaviour when selecting chips in Angular Material
  • How to make the tableview response pan gesture in ZUUIRevealController
  • How to replace TouchesBegan with UIGestureRecognizer
  • how to remove a div with same ids but display='block' and display='none' in JAVa
  • Jquery popup on mouse over of calendar control
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • How can I set a binding to a Combox in a UserControl?
  • Create DicomImage from scratch using Dcmtk
  • MongoError: Incorrect arguments
  • Django rest serializer Breaks when data exists
  • htaccess rewriting URLs with multiple forward slashes
  • Display Images one by one with next and previous functionality
  • Web-crawler for facebook in python
  • AT Commands to Send SMS not working in Windows 8.1
  • Cannot Parse HTML Data Using Android / JSOUP
  • A cron job substitute?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • JTable with a ScrollPane misbehaving
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Authorize attributes not working in MVC 4
  • apache spark aggregate function using min value
  • unknown Exception android
  • Sorting a 2D array using the second column C++
  • Observable and ngFor in Angular 2
  • failed to connect to specific WiFi in android programmatically
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • How can I use threading to 'tick' a timer to be accessed by other threads?