Angular 2 反应式表单错误 - TypeError：this.form.get 不是函数

Question

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

• 下一个
• 网络包
• 反应形式

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

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)

这是我的代码：

表单.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);
    }
}

表单.组件.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 2 - 反应形式方法中遇到了同样的问题。我的问题是将主 FormGroup 绑定到 HTML 时的语法。

我正在做<form formGroup="myFormGroupName">而不是<form [formGroup]="myFormGroupName"/>. 希望能帮助到你。

Answer 2

我将其发布在 Angular github 上。他们那边的开发人员能够为我解决这个问题。

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

您的示例中似乎发生了一些事情：

1）您不需要将 REACTIVE_FORM_DIRECTIVES 或 FormProviders 添加到模块定义中。当您导入 ReactiveFormsModule 时，这些内容都会包含在内。

2) 您正在从@angular/common 导入一些符号。这就是旧 API 所在的位置，它与新 API 不兼容。如果您将表单组件文件中的 FormBuilder 导入更改为指向 @angular/forms 中的新 API，则表单将按预期加载。