Geek Answers Handbook

Angular 2.0.0-rc.3 New Forms e2e specifications - cannot communicate with 'formGroup', cannot communicate with 'formControlName', etc.

I just updated all the forms in my application to use the Angular2 -rc3 new forms module, and I cannot run the specifications without seeing syntax analysis errors.

My forms work fine in the application, but when I run the specifications, I see errors like:

ERROR: 'Unhandled Promise rejection:', 'Template parse errors: Can't bind to 'formGroup' since it isn't a known native property

and

 ERROR: 'Unhandled Promise rejection:', 'Template parse errors: Can't bind to 'formControlName' since it isn't a known native property

I also get a warning about using the old forms module (which I actually do not use anywhere .. I do not get this error in the browser console)

 WARN: ' *It looks like you're using the old forms module. This will be opt-in in the next RC, and will eventually be removed in favor of the new forms module. For more information, see: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub '

When porting my application code to the latest form API, I saw these errors in the browser console when I ran the application locally. I was able to fix them by completing the documentation and importing the appropriate directives. Unfortunately, now when I run the tests, these errors occur in my terminal. I did not find any resources on how to port tests to the new forms module ... Any ideas?

+5
source share
2 answers

I had the same problem as on RC4 with new forms. The boot application worked fine, but as soon as I went to run unit tests, I ran into the same problems as you.

I think the root of the problem is that self-tuning customizes the forms beautifully for us, but when we run unit tests, we usually don't load anything.

My download is as follows:

 ionicBootstrap(ClickerApp, [ disableDeprecatedForms(), provideForms(), Clickers, provide('Storage', {useClass: Storage})] );

To get this working, I had to do two things:

1: Provide forms in my unit tests in the same way as in my boot lot using beforeEachProviders :

  let providers = [ disableDeprecatedForms(), provideForms() ] beforeEachProviders(() => providers);

2: add FORM_DIRECTIVES and REACTIVE_FORM_DIRECTIVES to my component:

 @Component({ selector: 'clicker-form', templateUrl: 'build/components/clickerForm/clickerForm.html', directives: [Button, Icon, Item, Label, TextInput, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES], })

Original github issue showing performance

Repo link with a working example of unit tests for new forms

+2
source

More articles:


All Articles