Angular 2.0.0-rc.3 New Forms e2e specs - can't bind to 'formGroup', can't bind to 'formControlName', etc

Question

I just updated all forms in my application to use Angular2-rc3's new forms module, and I am unable to run specs without seeing template parse errors.

My forms work fine in the application, but when I run the specs, I am seeing 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 still get the warning about using the old forms module (which I am not actually using anywhere.. I'm not getting 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
'

While migrating my application code to the latest Forms API, I saw these errors in the browser console when I ran the app locally. I was able to fix them by following the documentation, and importing the proper directives. Unfortunately, now that I'm running the tests, these errors are occurring in my terminal. I haven't found any resources on how to migrate the tests to the new forms module... Any Ideas?

Answer 1

I had the exact same problem running on RC4 with new forms. Bootstrapping the app worked fine, but as soon as I went to run unit tests I faced the same issues as you.

I think the root of the problem is that bootstrapping sets up the forms for us nicely, but when running unit tests we normally haven't bootstrapped anything.

My bootstrap looks like this:

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

To get this working I had to do two things:

1: Provide for forms in my unit tests the same as in my bootstrap 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 working

Link to repo with working example of unit tests on new forms