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

[WHarris22]

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

[jgw96]

Hello, thanks for opening an issue with us! We are currently aware of this issue and will be working on it. There were some pretty big breaking changes in the recent refactor of the Angular 2 forms module.

Note to self and the team: this issue may be related: #6580

[jgw96]

This may be related to(not 100% on that): #7010

[rapropos]

I don't know if there is an elegant way to support both deprecated and new forms, but I suspect this issue results from importing NG_VALUE_ACCESSOR from "@angular/common" instead of from "@angular/forms".

[jgw96]

@rapropos yeah, there are a good list of things that the Angular team changed in forms, but we're going through and updating everything so it works with the new forms (: Thanks for using Ionic!

[kokokenada]

BTW - will Ionic be supporting Angular built in validators like required, minlength, maxlength, pattern?

[rapropos]

This is fixed for me (with ion-checkbox) as of this commit.

[adamdbradley]

Yup, this should be closed with this commit: 4d56219

[vidakovic]

@adamdbradley this fixed input elements, but I am getting the following build error (from master):

src/components/menu/menu.ts(617,26): error TS2339: Property 'elementRef' does not exist on type 'Backdrop'.