Angular 找不到带路径的控件
Angular Cannot find control with path
我正在尝试使用 formArray 构建一个嵌套的反应式表单,但出现错误:'Cannot find control with path',如果数组中只有一个项目,它工作正常,但如果有超过 1 个,它 returns错误。我做错了什么?
ngfor 中的 carPartCategories 只是我从服务器获取的数据。
<form [formGroup]="updateEstimation">
<ng-container formArrayName="carPartStatus">
<ng-container *ngFor="let i of carPartCategories; let j = index;">
<ng-container [formGroupName]="j">
<div class="content-desc mt-4 mb-5">
<div class="row mt-4 parts-row align-items-center">
<div class="col-lg-2">
<span class="p-2 nusx">
{{i.carPartCategory}}
</span>
</div>
<div class="col-lg-3">
<span class="p-2 nusx">
{{i.carPartSubCategory}}
</span>
</div>
<div class="col-lg-2">
<span class="p-2 nusx">
<mat-form-field appearance="fill">
<mat-label>choose</mat-label>
<mat-select formControlName="status">
<mat-option>
test
</mat-option>
</mat-select>
</mat-form-field>
</span>
</div>
<div class="col-lg-2">
<span class="p-2 nusx">
X{{i.quantity}}
</span>
</div>
<div class="col-lg-2 price">
<input type="text" placeholder="price" class="form-control" formControlName="price">
</div>
</div>
</div>
<div class="comment mt-4 mb-5" *ngIf="i.comment">
<p class="mtav">comment</p>
<p class="nusx">{{i.comment}}</p>
</div>
<hr>
</ng-container>
</ng-container>
</ng-container>
</form>
.ts
this.updateEstimation = this.fb.group({
carPartStatus: new FormArray([
new FormGroup({
status: new FormControl(''),
price: new FormControl('')
})
])
});
发生这种情况是因为您仅在 FormArray
下添加了一个项目,并循环遍历另一个数组 carPartCategories
来呈现这些项目。
对于 carPartCategories
数组中的每一项,carPartStatus
的 FormArray
应包含一项作为 FormGroup
,并始终保持 FormArray
通过 adding/removing 控件与您的原始数组同步。
您可以尝试以下操作:
// prop represents the `carPartStatus` control
carPartStatusCtrl: FormArray;
//...
this.carPartStatusCtrl = this.createFormArray(carPartCategories);
this.updateEstimation = this.fb.group({
carPartStatus: this.carPartStatusCtrl,
});
// ...
// Create a `FormArray` from the provided array:
createFormArray(origin: CarPartCategories[]) {
return new FormArray(
origin.map(
(item) =>
new FormGroup({
status: new FormControl(item.status),
price: new FormControl(item.price),
})
)
);
}
对原数组的每一次改变都应该反映到FormArray
中,例如,如果你在原数组中添加了一个新的项目,那么一个新的项目应该被添加到FormArray
之类的以下:
appendNewItem(item: CarPartCategories): void {
this.carPartStatusCtrl.push(
new FormGroup({
status: new FormControl(item.status),
price: new FormControl(item.price),
})
);
}
更新
根据您的 StackBlitz,您从 HTTP 请求中接收到原始数组,但您初始化了 updateEstimation
form-group 而没有等待 return 结果,因此在这种情况下,您的 FromArray
将不包含任何项目,因为 carPartCategories
仍然是空的。
要解决此问题,您必须:
- 要么将
updateEstimation
初始化移动到 subscribe
函数内(并且在初始化 updateEstimation 之前不要渲染模板,方法是在 form
元素).
- 或者使用我上面在解决方案中提到的
appendNewItem
函数接收数据后,将新项目附加到 carPartStatusCtrl
form-array。
我正在尝试使用 formArray 构建一个嵌套的反应式表单,但出现错误:'Cannot find control with path',如果数组中只有一个项目,它工作正常,但如果有超过 1 个,它 returns错误。我做错了什么?
ngfor 中的 carPartCategories 只是我从服务器获取的数据。
<form [formGroup]="updateEstimation">
<ng-container formArrayName="carPartStatus">
<ng-container *ngFor="let i of carPartCategories; let j = index;">
<ng-container [formGroupName]="j">
<div class="content-desc mt-4 mb-5">
<div class="row mt-4 parts-row align-items-center">
<div class="col-lg-2">
<span class="p-2 nusx">
{{i.carPartCategory}}
</span>
</div>
<div class="col-lg-3">
<span class="p-2 nusx">
{{i.carPartSubCategory}}
</span>
</div>
<div class="col-lg-2">
<span class="p-2 nusx">
<mat-form-field appearance="fill">
<mat-label>choose</mat-label>
<mat-select formControlName="status">
<mat-option>
test
</mat-option>
</mat-select>
</mat-form-field>
</span>
</div>
<div class="col-lg-2">
<span class="p-2 nusx">
X{{i.quantity}}
</span>
</div>
<div class="col-lg-2 price">
<input type="text" placeholder="price" class="form-control" formControlName="price">
</div>
</div>
</div>
<div class="comment mt-4 mb-5" *ngIf="i.comment">
<p class="mtav">comment</p>
<p class="nusx">{{i.comment}}</p>
</div>
<hr>
</ng-container>
</ng-container>
</ng-container>
</form>
.ts
this.updateEstimation = this.fb.group({
carPartStatus: new FormArray([
new FormGroup({
status: new FormControl(''),
price: new FormControl('')
})
])
});
发生这种情况是因为您仅在 FormArray
下添加了一个项目,并循环遍历另一个数组 carPartCategories
来呈现这些项目。
对于 carPartCategories
数组中的每一项,carPartStatus
的 FormArray
应包含一项作为 FormGroup
,并始终保持 FormArray
通过 adding/removing 控件与您的原始数组同步。
您可以尝试以下操作:
// prop represents the `carPartStatus` control
carPartStatusCtrl: FormArray;
//...
this.carPartStatusCtrl = this.createFormArray(carPartCategories);
this.updateEstimation = this.fb.group({
carPartStatus: this.carPartStatusCtrl,
});
// ...
// Create a `FormArray` from the provided array:
createFormArray(origin: CarPartCategories[]) {
return new FormArray(
origin.map(
(item) =>
new FormGroup({
status: new FormControl(item.status),
price: new FormControl(item.price),
})
)
);
}
对原数组的每一次改变都应该反映到FormArray
中,例如,如果你在原数组中添加了一个新的项目,那么一个新的项目应该被添加到FormArray
之类的以下:
appendNewItem(item: CarPartCategories): void {
this.carPartStatusCtrl.push(
new FormGroup({
status: new FormControl(item.status),
price: new FormControl(item.price),
})
);
}
更新
根据您的 StackBlitz,您从 HTTP 请求中接收到原始数组,但您初始化了 updateEstimation
form-group 而没有等待 return 结果,因此在这种情况下,您的 FromArray
将不包含任何项目,因为 carPartCategories
仍然是空的。
要解决此问题,您必须:
- 要么将
updateEstimation
初始化移动到subscribe
函数内(并且在初始化 updateEstimation 之前不要渲染模板,方法是在form
元素). - 或者使用我上面在解决方案中提到的
appendNewItem
函数接收数据后,将新项目附加到carPartStatusCtrl
form-array。