Angular 2 Reactive Form Error – TypeError：this.form.get不是函数

2023年10月16日 232次阅读

我正在使用Angular 2 RC 5,其中包括：

> esnext
> 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/

最佳答案 我在角度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.

点赞