angular2錯誤

Question

我試圖創建一個嵌套的表格的子/子組件

表格嵌套表格組件我下面這個教程 https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 https://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=info

這是我如何修改它。我不想要一個數組。我只是在單一形式的組/控件之後。 https://plnkr.co/edit/xXXQwGMaos3yDeyF6YYy?p=preview

但是我得到這個錯誤。我該如何解決它？

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) 

`

Answer 1

的錯誤發生，因爲您傳遞無效類型的AddressComponent

AddressComponent期待輸入型FormGroup

應用程序/ address.component.ts

export class AddressComponent { 
    @Input('group') 
    public adressForm: FormGroup; 
} 

但是，您正在將myForm.controls.addresses.controls傳遞給AddressComponent，並且它的類型不正確。

應用程序/ app.component.html

<div formArrayName="addresses"> 
    <address [group]="myForm.controls.addresses.controls"></address> 
</div> 

爲了解決這個問題，您需要更改您的代碼myForm.controls.addresses

應用程序/ app.component.html

<div formArrayName="addresses"> 
    <address [group]="myForm.controls.addresses"></address> 
</div> 

工作叉Plunker