我正在使用反應形式開發一個 Angular 應用程式。我使用表單組獲取欄位的值,但這些欄位是動態創建的(用戶控制欄位的行數)。所以為此,我完成了以下代碼:
this.formSaisieSecondary = this.fb.group({
options:this.fb.array([])
});
newOption(): FormGroup {
return this.fb.group({
date:['', Validators.required],
cargoA:['', Validators.required],
cargoB:['', Validators.required],
cargoC:['', Validators.required],
cargoD:['', Validators.required],
cargoE:['', Validators.required],
unite:[this.unite, Validators.required],
siloA:['silo1', Validators.required],
siloB:['silo2', Validators.required],
siloC:['silo3', Validators.required],
siloD:['silo4', Validators.required],
siloE:['silo5', Validators.required],
comment:['']
})
}
options() : FormArray {
return this.formSaisie.get("options") as FormArray ;
}
AddOption(){
this.options().push(this.newOption());
}
HTML 代碼:
<form [formGroup]="formSaisie">
<div formArrayName="options">
<div style="height: 23px;" *ngFor="let option of options().controls; let i = index" [formGroupName]="i">
<div >
<input formControlName="date" type="text" formControlName="date" hidden [(ngModel)]="listDate[i]">
<p>{{listDate[i]}}</p>
</div>
<div >
<mat-form-field appearance="fill">
<mat-label>Cargaison</mat-label>
<mat-select formControlName = "cargoA" required>
<mat-option *ngFor="let cargo of dataEx" [value]="cargo.cargoId">
{{cargo.vessel " " cargo.externalId}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
.............
該代碼的靈感來自以下enter 方法
我的問題是如何獲取或設定屬性(欄位)的值,例如獲取我可以執行的值:
let value = this.formSaisie.value.options[0];
value.cargoA;
但我無法為欄位設定值。
uj5u.com熱心網友回復:
this.options().at(0).get('cargoA').setValue(someValue)
這會將表單陣列中索引 0 處的組的 cargoA 屬性設定為 someValue
旁注:強烈建議不要在同一表單中使用 ngModel 和回應式表單。它們會相互沖突并且有時是不可預測的。
uj5u.com熱心網友回復:
例如,您可以這樣做this.formSaisie.get('cargoA').setValue(someValueYouWouldLikeToSet)
編輯:
所以這樣做:this.formSaisie.get('options').get('cargoA').setValue(someValue)- 應該作業
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/442534.html
標籤:javascript 有角度的 打字稿 角材料
上一篇:'--isolatedModules'標志和RouterContext的問題
下一篇:打字稿和介面陣列未定義且不可分配
