我有 aFormGroup有FormArray3 FormControls。我想遍歷FormArray并以表格形式顯示每個值。但我被困在放什么上FormControlName。
這是我的FormGroup：
fg: FormGroup = new FormGroup({
properties: new FormArray([])
});
這就是我添加FormControls到我的FormArray，dataArray是我從我的回復中獲得的資料：
let formArray = this.fg.get('properties') as FormArray;
for(let property of dataArray){
const userPropertyGroup = new FormGroup({
user_id: new FormControl("", Validators.required),
name: new FormControl("", Validators.required),
value: new FormControl("", Validators.required),
});
formArray.push(userPropertyGroup);
要在 中設定值FormArray：
for(let i = 0; i < dataArray.length; i ){
formArray.controls[i].setValue({
user_id: dataArray[i].user_id,
name: dataArray[i].name,
value: dataArray[i].value,
})
}
現在我想迭代并顯示表單中的所有值。隨著{{property.value.name}}我能夠獲得陣列的每個屬性的值，但我被困在formControlName. 應該去那里做什么？
<form [formGroup]="fg" >
<table *ngFor="let property of fg.get('properties')['controls']" >
{{property.value.name}}
<tr>
<td>
<mat-form-field >
<input matInput formControlName="?????" placeholder="User id">
</mat-form-field>
</td>
我在 StackOverflow 上檢查了很多類似的問題，但沒有一個有幫助。我還嘗試從 Angular docs 實作這個示例。非常感謝任何幫助！謝謝。
uj5u.com熱心網友回復：
您需要按如下方式構建您的 html：
<form [formGroup]="fg">
<ng-container formArrayName="properties">
<div *ngFor="let property of properties.controls; let i = index"> <!-- Iterate over FormArray controls -->
<ng-container [formGroupName]="i"> <!-- Since each control within FormArray is a FormGroup -->
<input formControlName="user_id" type="text" />
<input formControlName="name" type="text" />
<input formControlName="value" type="text" />
</ng-container>
</div>
</ng-container>
</form>
在組件檔案中定義一個 getterts以獲取屬性 FormArray：
get properties(): FormArray {
return this.fg.get('properties') as FormArray;
}
PS：我沒有在 HTML 中指定任何 CSS 類或 Angular Material 組件，以保持結構簡單，以便于理解層次結構。我也使用過ng-container，您可以根據您的用例使用元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/428389.html
上一篇：npm安裝：無法決議依賴樹
下一篇：以正確的格式顯示日期