bug: Ionic2 beta 10 ionic form elements do not work with @angular/forms

Short description of the problem:

When trying to use the Angular 2 rc 3 @angular/forms module, Ionic’s form elements always throw an error when adding the formControlName directive to them. For example: <ion-input type="text" formControlName="formControl1" ></ion-input>

Putting it to normal HTML input markup works OK, for example: <input type="text" formControlName="fullName" />

What behavior are you expecting?

Ionic form elements; ion-input, ion-textarea, ion-select etc should all work with the new @angular/forms module.

Steps to reproduce:

1. Start a new Ionic app using beta 10
2. Add the @angular/forms module to the app
3. In the app.ts file import the following import {disableDeprecatedForms, provideForms} from '@angular/forms';
4. And then add the two imports to the ionicBootstrap like this ionicBootstrap(MyApp, [ disableDeprecatedForms(), provideForms() ]);
5. Now on another page create a form using Ionic inputs and the Form Builder part of this tutorial

Thats the best I can do for reproducing because I can’t find any Plunker examples set up with the required modules and Ionic beta 10.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

The error written to the console log is:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in build/pages/issue-form/issue-form.html:61:39 ORIGINAL EXCEPTION: No value accessor for ‘control1’ ORIGINAL STACKTRACE: Error: No value accessor for ‘control1’ at new BaseException (http://localhost:8100/build/js/app.bundle.js:2435:23) at _throwError (http://localhost:8100/build/js/app.bundle.js:37484:11) at Object.setUpControl (http://localhost:8100/build/js/app.bundle.js:37459:9) at FormGroupDirective.addControl (http://localhost:8100/build/js/app.bundle.js:37027:18) at FormControlName.ngOnChanges (http://localhost:8100/build/js/app.bundle.js:36902:32) at DebugAppView._View_IssueFormPage0.detectChangesInternal (IssueFormPage.template.js:509:56) at DebugAppView.AppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:30588:14) at DebugAppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:30693:44) at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8100/build/js/app.bundle.js:30614:19) at DebugAppView.AppView.detectChangesInternal (http://localhost:8100/build/js/app.bundle.js:30599:14)

A related post on the Ionic forum

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 5.4.0 Gulp version: CLI version 3.8.11 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.25 Ionic App Lib Version: 2.0.0-beta.15 OS: Windows 8.1 Node Version: v4.4.2

[vidakovic]

@cescoferraro what I did:

• checkout the master branch with git
• build: gulp build --typecheck
• delete [YOURPROJECT]/node_modules/ionic-angular
• copy the content of “dist” folder to [YOURPROJECT]/node_modules/ionic-angular

Not sure if there is a shorter way to do this, but it’s not too bad.

[rapropos]

In addition to @vidakovic’s method, if you’re using webpack, here’s how I was able to use a locally built ionic:

• check out with git
• gulp prerelease
• cd dist
• npm link
• go to app project directory
• clear out node_modules/ionic-angular
• add aliases described in this issue to webpack configuration
• npm link ionic-angular

This way further tweaks to the local ionic build will automatically filter up without requiring constantly cleaning and copying the dist directory. I suspect something similar is possible with browserify, but I don’t know.