Ionic 2, beta 11, ngModel for 2 way data binding syntax

[tomgallagher]

I've been using code like this all over my app:

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

Yet after updating to beta11, all of the pages using ngModel are now causing errors.

I have narrowed it down to ngModel but cannot work out why it has suddenly stopped working and how to fix it.

[jgw96]

Hello, thanks for opening an issue with us! Unfortunately, I am unable to reproduce this issue at this time. Would you be able to make a repo with a minimal example of this issue? Thanks!

[davidefavia]

Hi,
I faced the same problem (having one standalone ngModel causing errors) today and resolved the following way, BUT using model-driven form, not template-driven one.

Update packages

See Steps to Upgrade to Beta 11.

$ npm install --save --save-exact ionic-angular@2.0.0-beta.11 @angular/common@2.0.0-rc.4 @angular/compiler@2.0.0-rc.4 @angular/core@2.0.0-rc.4 @angular/http@2.0.0-rc.4 @angular/platform-browser@2.0.0-rc.4 @angular/platform-browser-dynamic@2.0.0-rc.4 @angular/forms@0.2.0 rxjs@5.0.0-beta.6 zone.js@0.6.12

See that now your app depends on @angular/forms@0.2.0, no more on @angular/forms@0.1.1.

Application bootstrap

Inside app.ts:

import { disableDeprecatedForms, provideForms } from '@angular/forms';

//...

ionicBootstrap(MyApp, [
  provideForms(),
  disableDeprecatedForms(),
  // providers...
]);

Import new stuff

At the beginning of the component file import new stuff (only what you need),

import { REACTIVE_FORM_DIRECTIVES, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

and inject dependencies:

@Component({
  templateUrl : 'build/login.html',
  directives : [REACTIVE_FORM_DIRECTIVES]
})
export class LoginPageComponent {

  // FormGroup
  authForm: FormGroup;
  // FormControl
  emailControl: FormControl;

  constructor(fb: FormBuilder) {

    this.emailControl = new FormControl('', Validators.compose([
      Validators.required,
      // Other validators...
    ]));

    this.authForm = fb.group({
      email : this.emailControl
    });
  }

  login(): void {
    if(this.authForm.valid) {
      let emailValue = this.authForm.value.email;
      // login stuff...
    }
  }
}

Modify template

Modify the template with new control names:

<form [formGroup]="authForm" (ngSubmit)="login()">
  <ion-list>
    <ion-item>
      <ion-label stacked>Email</ion-label>
      <ion-input type="email" [formControl]="authForm.controls['email']" placeholder="Your e-mail"></ion-input>
    </ion-item>
  </ion-list>
  <button block [disabled]="!authForm.valid">Login</button>
</form>

Hope this could help you or addressing you the right way to deal with your issue. Pay attention to install Angular2 RC4 because RC5 introduces ReactiveFormsModule. 😫

[tomgallagher]

Wow. That's a good effort, well done. I'm actually using ngModel independently of any forms but it's good to have this as an option that works.

[davidefavia]

I'm using ngModel alone too, just to change a boolean variable to toggle fields inside a form. The following code works (inside a form):

<ion-checkbox [(ngModel)]="myVar" [ngModelOptions]="{standalone: true}"></ion-checkbox>

For more info: #angular/angular#9230 (comment)

[ghenry22]

I just came across a similar issue on upgrading to beta11. If you check out the ionic conference app on github and look at the login page it is using ngmodel for the login form and has incorporated some syntax changes.

I just updated my form to remove a couple of old values and follow that example and everything was good again.

[tomgallagher]

Hi - thanks to everyone for the feedback. I am using ngModel outside a form, i.e. there is no form on the page, just for simple 2 way data binding as indicated in the angular docs.

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

The example from the conference app is using ngModel inside a form so unfortunately is not my use case. The option of:

[ngModelOptions]="{standalone: true}

looked promising, and I suspect might work. I think what has happened in beta11 is that ngModel has been moved from the core into a forms module that I am not currently importing since it was not required before beta11 and I am not using forms in my app. Any ideas about the current syntax for importing the forms module into ionic 2?

[davidefavia]

Try this (not tested)

// Imports...
import { NgModel } from '@angular/forms';

@Component({
  templateUrl : 'my-template.html',
  directives: [NgModel]
})
export class MyComponent {
  // ...

OR

// Imports...
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';

@Component({
  templateUrl : 'my-template.html',
  directives: [REACTIVE_FORM_DIRECTIVES]
})
export class MyComponent {
  // ...

I only imported REACTIVE_FORM_DIRECTIVES in my component and I used ngModel successfully, I think the second approach should work, don't know about the first.

[jgw96]

Hello @tomgallagher ! Could you check that you are in fact running Angular 2 rc4 and not Angular 2 rc5? To check this you can go into your node_modules and check the package.json of the @angular/core module. Thanks!

[tomgallagher]

Here's my package.json from the core module

{ "name": "@angular/core", "version": "2.0.0-rc.4", "main": "index.js", "jsnext:main": "esm/index.js", "typings": "index.d.ts", "author": { "name": "angular" },

Just to check, I had a look at the same for my forms:

{ "name": "@angular/forms", "version": "0.3.0", "main": "index.js", "jsnext:main": "esm/index.js", "typings": "index.d.ts", "author": { "name": "angular" },

Not sure if that's right. So I ran

npm uninstall @angular/forms

Then:

npm install @angular/forms@0.2.0 --save-exact

But the package.json remains the same. Strange.

[jgw96]

@tomgallagher ahh, forms should be 0.2.0 and not 0.3.0. To install with --save-exact the correct command would be npm install @angular/forms@0.2.0 --save --save-exact. Thanks!

[tomgallagher]

Yes that's been the ongoing problem. Sorry to waste your time with this. I had forms 0.2.0 installed but in the wrong directory. Please close this issue to save me any more embarrassment!

[jgw96]

hahaha dont worry i make the same kind of mistakes all the time. Im glad we figured out what the issue was. Also, thanks everyone for all the help, so nice to see the community coming out to help with an issue!