TypeError: this.form.get is not a function in FormGroupDirective.addControl

[tahseen]

I'm submitting a ... (check one with "x")

[x ] bug report

Current behavior

I am using Angular 2 with following tools:

• webpack
• esnext
• reactive form (introduce in RC 5)

zone.js:461 Unhandled Promise rejection: EXCEPTION: Error in ./FormComponent class FormComponent - inline template:4:25
ORIGINAL EXCEPTION: TypeError: this.form.get is not a function
ORIGINAL STACKTRACE:
TypeError: this.form.get is not a function
    at FormGroupDirective.addControl (https://tahseen.github.io/angular2-reactive-form-webpack-esnext/loads.bundle.js:35832:31)
    at FormControlName.ngOnChanges (https://tahseen.github.io/angular2-reactive-form-webpack-esnext/loads.bundle.js:35650:33)
    at DebugAppView._View_FormComponent0.detectChangesInternal (FormComponent.ngfactory.js:230:55)
    at DebugAppView.AppView.detectChanges (https://tahseen.github.io/angular2-reactive-form-webpack-esnext/loads.bundle.js:18565:15)
    at DebugAppView.detectChanges (https://tahseen.github.io/angular2-reactive-form-webpack-esnext/loads.bundle.js:18671:45)
    at DebugAppView.AppView.detectViewChildrenChanges (https://tahseen.github.io/angular2-reactive-form-webpack-esnext/loads.bundle.js:18591:20)
    at DebugAppView._View_FormComponent_Host0.detectChangesInternal (FormComponent.ngfactory.js:31:8)
    at DebugAppView.AppView.detectChanges (https://tahseen.github.io/angular2-reactive-form-webpack-esnext/loads.bundle.js:18565:15)
    at DebugAppView.detectChanges (https://tahseen.github.io/angular2-reactive-form-webpack-esnext/loads.bundle.js:18671:45)
    at ViewRef_.detectChanges (https://tahseen.github.io/angular2-reactive-form-webpack-esnext/loads.bundle.js:16397:66)

Reproduction of the problem

Please see following link full code:
https://github.com/tahseen/angular2-reactive-form-webpack-esnext

Please see following link for live example:
https://tahseen.github.io/angular2-reactive-form-webpack-esnext/

Please tell us about your environment:

• Angular version: 2.0.0-rc.5
• Browser: [all ]
• Language: [ES6/7]

[kara]

@tahseen It looks like there are a few things going on in your sample:

1. You don't need to add REACTIVE_FORM_DIRECTIVES or FormProviders to your module definition. These are included when you import the ReactiveFormsModule.

2. You are importing a few symbols from @angular/common. That's where the old API lives, and it's not compatible with the new API. If you change the FormBuilder import in your form component file to point to the new API in @angular/forms, the form loads as expected.

See sample plunker here: http://plnkr.co/edit/aP4ZOB4n2FfmZnTWGsqF?p=preview.

[tahseen]

Thanks you are awesome!

[miculprogramator]

the same error here for ionic 3

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}