我正在使用以下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)
这是我的代码:
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
您的示例中似乎发生了一些事情:
1)您不需要在模块定义中添加REACTIVE_FORM_DIRECTIVES或FormProviders。当您导入ReactiveFormsModule时,将包括这些。
2)您正在从@ angular / common导入一些符号。那就是旧API所在的地方,并且与新API不兼容。如果您将表单组件文件中的FormBuilder导入更改为指向@ angular / forms中的新API,则将按预期加载表单。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句