角2反应形式错误 - 类型错误：this.form.get不是函数

Question

我使用角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/

Answer 1

我张贴这种对角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导入之前放置上述行。