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

Question

我正在使用 Angular 2 RC 5 以及以下内容：

下一个
webpack
反应形式

我构建了一个简单的测试表单，但在浏览器控制台中出现以下错误：

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)

这是我的代码：

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>

有谁知道这里会发生什么？我坚持了好几天。

完整的代码可以在这里找到：

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

错误的实例可以在这里看到：

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

Answer 1

我在 angular github 上发布了这个。那边的开发者帮我解决了。

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 2

没错。我遇到了类似的问题，但是，在撰写本文时，关于 Angular 2 的最新版本，我将路由放在一个单独的打字稿文件中。然后，在 app.module.ts 添加以下行：

RouterModule.forRoot(APP_ROUTES) 到导入列表 @NgModules，其中 APP_ROUTES 是路径路由数组（导入）。请注意，您必须在 ReactiveFormsModule 导入之前放置上述行。

Answer 3

我在使用 Angular 2 - 反应式表单方法时遇到了同样的问题。我的问题是将主 FormGroup 绑定到 HTML.

时的语法

我在做 <form formGroup="myFormGroupName"> 而不是 <form [formGroup]="myFormGroupName"/>。希望对你有帮助。

Answer 4

我觉得，定义一个form ID，form ID和Form Group name不应该相同例如：-

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

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

angular2-forms

angular