我需要創建與陣列中的記錄一樣多的輸入欄位。
嘗試執行此操作時出現以下錯誤：
找不到帶有路徑的控制元件：'data -> 1 -> value'
如何解決？
html:
<form [formGroup]="form">
<div *ngIf="subCategoriesParams$ | async as subCategoryParams">
<ng-container *ngFor="let params of subCategoryParams.params; let i = index"
formArrayName="data">
<div formGroupName="{{i}}">
<div >
<label >
{{params.paramsName}}
</label>
<input type="text" formControlName="value"
(change)="onChangeEvent(params)">
</div>
</div>
</ng-container>
</div>
</form>
<button (click)="save()">Save</button>
ts：
public get data() {
return this.form.get('data') as FormArray;
}
initializeForm(): void {
this.form = this.fb.group({
data: this.fb.array([
this.fb.group({
params: [this.inp, Validators.required],
category: [this.selectedDescendants, Validators.required],
value: ['', Validators.required],
})
])
});
}
loadParams() {
this.subCategoriesParams$ =
this.categoryService.findOne(this.selectedDescendants);
}
uj5u.com熱心網友回復：
問題與關注
您正在迭代i(formGroupName) 基于subCategoryParams.params但不基于formArray.
從上面的代碼中，我看不到任何 ( FormGroup) 值被初始化為data( FormArray)。
因此，假設subCategoryParams.params長度為 3，而data長度為 0。這就是您遇到上述錯誤的原因。
解決方案
通過將實體添加到 來確保您的data( FormArray) 長度必須與 的長度精確。subCategoryParams.paramsFormGroupFormArray
initializeForm(): void {
...
this.subCategoriesParams$.forEach((value) => {
for (let param of value.params) {
this.data.push(
this.fb.group({
params: [this.inp, Validators.required],
category: [this.selectedDescendants, Validators.required],
value: ['', Validators.required],
})
);
}
});
}
StackBlitz 上的示例演示
筆記：
- 為了更安全（真正的答案），您必須遍歷
data.controls（FormArray）。 - 下面的解決方案只是為了解決，以防你熱衷于迭代
subCategoryParams.params。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/408143.html
標籤：