Angular 2 Reactive Form Error - TypeError : this. form.get 不是一个函数

Question

我正在使用 Angular 2 RC 5 并执行以下操作:

• 下一个
• 网页包
• 响应式(Reactive)

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

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 2 - 响应式表单方法时遇到了同样的问题。我的问题是将主 FormGroup 绑定(bind)到 HTML 时的语法。

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