Two-way data binding not working with <ion-input> in an electron app

Ionic Framework ionic-v3
1

Hi,

I’m using ionic-angular@2.0.0-beta.11, and i’m having trouble getting two-way binding working with <ion-input>. However, if I replace it with html <input>, then two-way binding works just fine.

I have not tested it with any previous beta versions of ionic 2. So, I can’t confirm if it worked with the previous versions.

Here is my code -

home.html

<ion-header>                                                                                                                                                                                   
  <ion-navbar>                                                                  
    <ion-title>                                                                 
      Home                                                                      
    </ion-title>                                                                
  </ion-navbar>                                                                 
</ion-header>                                                                   
                                                                                
<ion-content class="home" padding>                                              
  <ion-item>                                                                    
    <ion-label primary floating>Name</ion-label>                                
    <ion-input [(ngModel)]="name"></ion-input>                                  
  </ion-item>                                                                   
  <ion-label>Hello {{name}}!</ion-label>                                        
  <button (click)="showName()">Click Me</button>                                                                   
</ion-content>

home.ts

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

@Component({
  template: require("./home.html")
})

export class HomePage {
  name: string;
  constructor(private alertController: AlertController) {

  }
  showName() {
    console.log(this.name);
    let alert = this.alertController.create({
      title: 'Hello ' + this.name + '!',
      buttons: ['OK']
    });
    alert.present();
  }
}

When I input text in <ion-input> field, {{name}} in <ion-label> shows nothing. Also, after inputing text, when I click on button, console log prints undefined for this.name and alert shows nothing too.

I’m using ionic 2 in a desktop app written using electron framework. Would that make any difference? One another issue I noticed was with floating label, floating animation never works!! You can find my code at - https://github.com/ssreekanth/electron-ionic2-webpack-starter

Please correct me if I’m doing it wrong. But, this has been bugging me for a while. Any help will be much appreciated!

Thank you
Sreekanth

1 Like
2

You need ngModel on the input, like this:
<ion-input [(ngModel)]="name"></ion-input>

2 Likes
3

Thanks @scottlott for your response.

My bad! I had [(ngModel)] there, it didn’t work. So, I was trying with different things and didn’t realize i pasted the wrong code.

Anyhow, tried it again, [(ngModel)]="name" didn’t work !!

Btw, I’m using ionic 2 for developing a desktop app using electron framework. Would that make any difference? One another issue I noticed was with floating label, floating animation never works!!

I’m wondering if the issues are with the latest beta 11 of ionic 2 framework or seen with electron app only?

4

Check the Proposed API Changes here: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

I believe you’re missing the name attribute in your ion-input? Try:

<ion-input name="name" [(ngModel)]="name"></ion-input>

However you might need to nest <ion-input> inside a form tag too. (I haven’t tested, just going off what the docs seem to show in their examples)

5

This works with very few changes to your code…

home.ts

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

@Component({
    templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
    name: string;

    constructor(public navCtrl: NavController, private alertController: AlertController) {
    }

    showName() {
        console.log(this.name);
        let alert = this.alertController.create({
            title: 'Hello ' + this.name + '!',
            buttons: ['OK']
        });
        alert.present();
    }
}

home.html

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-label>{{ name }}</ion-label>
    <ion-input [(ngModel)]="name"></ion-input>
    <button (click)="showName()">Click Me</button>
</ion-content>
6

@jourdan

<ion-input name="name" [(ngModel)]="name"></ion-input>

Tried nesting it inside a form tag too… that didn’t help either…

7

You don’t need name="name"

Something was off with your original code … it’s not the standard template from Beta 11.

Build a new app, copy and paste my code. Heck, copy your own TS code. It will all work. :wink:

8

Just now tried <ion-input> in the standard template using ionic cli. It works well there…

Looks like this issue is happening when ionic 2 is used in an electron app. Not sure what exactly is causing the issue?

9

If anyone is interested in debugging the issue, my code is available at https://github.com/ssreekanth/electron-ionic2-webpack-starter

After cloning repo from above url, just try the following commands…

$ npm install
$ npm start
10

@mhartington @brandyshea <ion-input>'s two-way data binding not working in an electron app. Could you let me know if this is an issue with ionic 2 or electron or my code? :worried: Thank you very much in advance!!

11

would you be able to open an issue for this. It does seem to be an issue that we should fix.
It seems only related ion-input as a regular input does not have this issue. Thanks for bringing this to our attention.

12

My pleasure! Thank you again for providing us an awesome cross-platform framework!

Here you go… https://github.com/driftyco/ionic/issues/7675

13

Hi,

I ran into the same problem. Have you tried importing Page from ionic-angular and declaring your class as @Page instead of @Component? That worked for me :slight_smile:

14

Isn’t @Page obsolete now? Here is the excerpt from http://blog.ionic.io/ionic-2-beta-8-is-live/

@App and @Page should be replaced with @Component.
15

And how to show it in another page. Is there any procedure to write in another typescript?

1 Like
16

In my case I have a reactive form but without ngModel, it’s not “reactive” and I don’t see 2-way binding actually work. Doesn’t putting an ngModel in a reactive form defeat the whole purpose?