Angular表单FormArray中嵌套FormGroup报错:Cannot find control with path: itemArray

最新推荐文章于 2023-05-10 14:30:27 发布

Web后端技术

最新推荐文章于 2023-05-10 14:30:27 发布

阅读量4.6k

点赞数 3

分类专栏： Angular Web开发文章标签： angular 前端

本文链接：https://blog.csdn.net/cnwyt/article/details/115028873

版权

Angular表单FormArray中嵌套FormGroup报错:Cannot find control with path: itemArray -> i

报错主体格式如下：

Angular is running in development mode. 
Call enableProdMode() to enable production mode.
core.js:6157 Error: Cannot find control with path: 'addresses -> i'
	at _throwError (forms.js:2602)
	at setUpFormContainer (forms.js:2575)
core.js:6157 Error: Cannot find control with path: 'addresses -> i -> city'
	at _throwError (forms.js:2602)
	at setUpFormContainer (forms.js:2575)
core.js:6157 Error: Cannot find control with path: 'addresses -> i -> area'
	at _throwError (forms.js:2602)
	at setUpFormContainer (forms.js:2575)

组件中表单格式如下：

// member-edit.component.ts
editForm = this.fb.group({
   
	addresses: this.fb.array([
	  this.fb.group({
   
	    city: ['上海'],
	    area: ['浦东新区大西瓜'],
	    zipcode: ['112233'],
	  }),
	  this.fb.group({
   
	    city: ['杭州'],
	    area: ['萧山区萝卜干'],
	    zipcode: ['223344'],
	  }),
	]),
})

为了方便在 html 中使用，使用 getter 转换addresses字段为 FormArray 类型，为addressArray：

// member-edit.component.ts 
get addressArray() : FormArray {
   
    return this.editForm.get('addresses') as FormArray;
}

html展示如下：

收货地址:  <a (click)="addNewAddress()"> + add address </a>
<div formArrayName="addressArray"> <!-- <== 这里错误1 -->
    <div *ngFor="let addr of addressArray.controls; let j = index"> 
        <div formGroupName="j"> <!-- <== 这里错误2 -->
            {
   {
    j + 1}} : 
            <input formControlName="city" placeholder="city"> 
            <input formControlName&#