Angular 2 Reactive Form Error - TypeError: this.form.get is not a function

Question

I am using Angular 2 RC 5 with following:

• esnext
• webpack
• reactive form

I have built a simple test form and I am getting following error in the browser console:

zone.js:461Unhandled 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)

Here is my code:

form.component.js

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/common';

import template from './form.component.html'

@Component({
    selector: 'load-form',
    template: template
})
export class FormComponent {
    carriers = [];
    stations = [];
    loadForm = {};

    constructor(formBuilder : FormBuilder) {
        this.formBuilder = formBuilder;

        this.loadForm = this.formBuilder.group({
            carrierId: '',
            carrierStationId: ''
        });

        console.log("constructor")
    }

    ngOnInit() {
        console.log("ngOnInit")
    }

    saveLoad(data) {
        console.log(data);
    }
}

form.component.html

<form [formGroup]="loadForm" (ngSubmit)="saveLoad(loadForm.value)">
  <div>
    <label>Carrier</label>
    <div>
      <input type="text" formControlName="carrierId">
    </div>
  </div>

  <div>
    <label>Station</label>
    <div>
      <input type="text" formControlName="carrierStationId">
    </div>
  </div>

  <div>
    <button type="submit" >[+] Add Load</button>
  </div>
</form>

Has anyone know what is going to here? I stuck on this for days now.

The full code can be found here:

https://github.com/tahseen/angular2-reactive-form-webpack-esnext

And the live example with error can be seen here:

https://tahseen.github.io/angular2-reactive-form-webpack-esnext/

Answer 1

I was getting the same issue with Angular 2 - reactive forms approach. My issue was with syntax when binding the main FormGroup to HTML.

I was doing <form formGroup="myFormGroupName"> instead of <form [formGroup]="myFormGroupName"/>. Hope it helps.

Answer 2

I posted this on the angular github. They developer over there were able to solved it for me.

https://github.com/angular/angular/issues/11171#issuecomment-243583467

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.

Answer 3

I think, Define a form ID, form ID and Form Group name should not be the same ex:-