[英]nested form components angular2 error
I am trying to create a form with nested form sub/child components 我正在尝试使用嵌套的表单子/子组件创建表单
I am following this tutorial https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 https://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=info 我正在关注本教程https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 https://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=info
This is how i modified it. 这就是我修改它的方式。 I don't want an array. 我不要数组。 I am only after single form group/controls. 我只在单一表单组/控件之后。 https://plnkr.co/edit/xXXQwGMaos3yDeyF6YYy?p=preview https://plnkr.co/edit/xXXQwGMaos3yDeyF6YYy?p=preview
However I get this error. 但是我得到这个错误。 how can I fix it? 我该如何解决?
VM2737 core.umd.js:3004 EXCEPTION: Error in https://run.plnkr.co/8GpCKDyop2isKZyM/app/address.component.html:0:5 caused by: this.form._updateTreeValidity is not a functionErrorHandler.handleError @ VM2737 core.umd.js:3004(anonymous function) @ VM2737 core.umd.js:6592ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:192onInvoke @ VM2737 core.umd.js:6206ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:191Zone.run @ VM6060 zone.js@0.6.23?main=browser:85(anonymous function) @ VM6060 zone.js@0.6.23?main=browser:451ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:225onInvokeTask @ VM2737 core.umd.js:6197ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:224Zone.runTask @ VM6060 zone.js@0.6.23?main=browser:125drainMicroTaskQueue @ VM6060 zone.js@0.6.23?main=browser:357ZoneTask.invoke @ VM6060 zone.js@0.6.23?main=browser:297
VM2737 core.umd.js:3006 ORIGINAL EXCEPTION: this.form._updateTreeValidity is not a functionErrorHandler.handleError @ VM2737 core.umd.js:3006(anonymous function) @ VM2737 core.umd.js:6592ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:192onInvoke @ VM2737 core.umd.js:6206ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:191Zone.run @ VM6060 zone.js@0.6.23?main=browser:85(anonymous function) @ VM6060 zone.js@0.6.23?main=browser:451ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:225onInvokeTask @ VM2737 core.umd.js:6197ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:224Zone.runTask @ VM6060 zone.js@0.6.23?main=browser:125drainMicroTaskQueue @ VM6060 zone.js@0.6.23?main=browser:357ZoneTask.invoke @ VM6060 zone.js@0.6.23?main=browser:297
VM2737 core.umd.js:3009 ORIGINAL STACKTRACE:ErrorHandler.handleError @ VM2737 core.umd.js:3009(anonymous function) @ VM2737 core.umd.js:6592ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:192onInvoke @ VM2737 core.umd.js:6206ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:191Zone.run @ VM6060 zone.js@0.6.23?main=browser:85(anonymous function) @ VM6060 zone.js@0.6.23?main=browser:451ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:225onInvokeTask @ VM2737 core.umd.js:6197ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:224Zone.runTask @ VM6060 zone.js@0.6.23?main=browser:125drainMicroTaskQueue @ VM6060 zone.js@0.6.23?main=browser:357ZoneTask.invoke @ VM6060 zone.js@0.6.23?main=browser:297
VM2737 core.umd.js:3010 TypeError: this.form._updateTreeValidity is not a function
at FormGroupDirective._updateDomValue (VM2741 forms.umd.js:3643)
at FormGroupDirective.ngOnChanges (VM2741 forms.umd.js:3569)
at Wrapper_FormGroupDirective.detectChangesInInputProps (VM2791 wrapper.ngfactory.js:24)
at _View_AddressComponent0.detectChangesInternal (VM2799 component.ngfactory.js:153)
at _View_AddressComponent0.AppView.detectChanges (VM2737 core.umd.js:9305)
at _View_AddressComponent0.DebugAppView.detectChanges (VM2737 core.umd.js:9410)
at _View_AppComponent0.AppView.detectViewChildrenChanges (VM2737 core.umd.js:9331)
at _View_AppComponent0.detectChangesInternal (VM2798 component.ngfactory.js:350)
at _View_AppComponent0.AppView.detectChanges (VM2737 core.umd.js:9305)
at _View_AppComponent0.DebugAppView.detectChanges (VM2737 core.umd.js:9410)ErrorHandler.handleError @ VM2737 core.umd.js:3010(anonymous function) @ VM2737 core.umd.js:6592ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:192onInvoke @ VM2737 core.umd.js:6206ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:191Zone.run @ VM6060 zone.js@0.6.23?main=browser:85(anonymous function) @ VM6060 zone.js@0.6.23?main=browser:451ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:225onInvokeTask @ VM2737 core.umd.js:6197ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:224Zone.runTask @ VM6060 zone.js@0.6.23?main=browser:125drainMicroTaskQueue @ VM6060 zone.js@0.6.23?main=browser:357ZoneTask.invoke @ VM6060 zone.js@0.6.23?main=browser:297
VM2737 core.umd.js:3013 ERROR CONTEXT:ErrorHandler.handleError @ VM2737 core.umd.js:3013(anonymous function) @ VM2737 core.umd.js:6592ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:192onInvoke @ VM2737 core.umd.js:6206ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:191Zone.run @ VM6060 zone.js@0.6.23?main=browser:85(anonymous function) @ VM6060 zone.js@0.6.23?main=browser:451ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:225onInvokeTask @ VM2737 core.umd.js:6197ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:224Zone.runTask @ VM6060 zone.js@0.6.23?main=browser:125drainMicroTaskQueue @ VM6060 zone.js@0.6.23?main=browser:357ZoneTask.invoke @ VM6060 zone.js@0.6.23?main=browser:297
VM2737 core.umd.js:3014 DebugContext {_view: _View_AddressComponent0, _nodeIndex: 0, _tplRow: 0, _tplCol: 5}ErrorHandler.handleError @ VM2737 core.umd.js:3014(anonymous function) @ VM2737 core.umd.js:6592ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:192onInvoke @ VM2737 core.umd.js:6206ZoneDelegate.invoke @ VM6060 zone.js@0.6.23?main=browser:191Zone.run @ VM6060 zone.js@0.6.23?main=browser:85(anonymous function) @ VM6060 zone.js@0.6.23?main=browser:451ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:225onInvokeTask @ VM2737 core.umd.js:6197ZoneDelegate.invokeTask @ VM6060 zone.js@0.6.23?main=browser:224Zone.runTask @ VM6060 zone.js@0.6.23?main=browser:125drainMicroTaskQueue @ VM6060 zone.js@0.6.23?main=browser:357ZoneTask.invoke @ VM6060 zone.js@0.6.23?main=browser:297
VM6060 zone.js@0.6.23?main=browser:344 Unhandled Promise rejection: Error in https://run.plnkr.co/8GpCKDyop2isKZyM/app/address.component.html:0:5 caused by: this.form._updateTreeValidity is not a function ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in https://run.plnkr.co/8GpCKDyop2isKZyM/app/address.component.html:0:5 caused by: this…, originalError: TypeError: this.form._updateTreeValidity is not a function
at FormGroupDirective._updateDomValue…, context: DebugContext} TypeError: this.form._updateTreeValidity is not a function
at FormGroupDirective._updateDomValue (https://unpkg.com/@angular/forms/bundles/forms.umd.js:3643:23)
at FormGroupDirective.ngOnChanges (https://unpkg.com/@angular/forms/bundles/forms.umd.js:3569:22)
at Wrapper_FormGroupDirective.detectChangesInInputProps (/ReactiveFormsModule/FormGroupDirective/wrapper.ngfactory.js:24:18)
at _View_AddressComponent0.detectChangesInternal (/AppModule/AddressComponent/component.ngfactory.js:153:32)
at _View_AddressComponent0.AppView.detectChanges (https://unpkg.com/@angular/core/bundles/core.umd.js:9305:18)
at _View_AddressComponent0.DebugAppView.detectChanges (https://unpkg.com/@angular/core/bundles/core.umd.js:9410:48)
at _View_AppComponent0.AppView.detectViewChildrenChanges (https://unpkg.com/@angular/core/bundles/core.umd.js:9331:23)
at _View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:350:8)
at _View_AppComponent0.AppView.detectChanges (https://unpkg.com/@angular/core/bundles/core.umd.js:9305:18)
` `
The error is happening because you are passing invalid type to the AddressComponent
发生错误是因为您将无效类型传递给AddressComponent
AddressComponent
is expecting input with type FormGroup
AddressComponent
期望输入的类型为FormGroup
app/address.component.ts app / address.component.ts
export class AddressComponent {
@Input('group')
public adressForm: FormGroup;
}
But you are passing myForm.controls.addresses.controls
to AddressComponent
, and it has incorrect type. 但是您正在将myForm.controls.addresses.controls
传递给AddressComponent
,并且其类型不正确。
app/app.component.html app / app.component.html
<div formArrayName="addresses">
<address [group]="myForm.controls.addresses.controls"></address>
</div>
To fix that, you need to change your code to myForm.controls.addresses
要解决此问题,您需要将代码更改为myForm.controls.addresses
app/app.component.html app / app.component.html
<div formArrayName="addresses">
<address [group]="myForm.controls.addresses"></address>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.