我如何设置 属性 的值
how can i set a value for property
我正在使用响应式开发 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 class="row mb-5" style="height: 23px;" *ngFor="let option of options().controls; let i = index" [formGroupName]="i">
<div class="col-md-1">
<input formControlName="date" type="text" formControlName="date" hidden [(ngModel)]="listDate[i]">
<p>{{listDate[i]}}</p>
</div>
<div class="col-md-2">
<mat-form-field class="inputGridItem" 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>
.............
代码受以下启发the enter method
我的问题是如何获取或设置 属性(field) 的值
例如,为了获得我可以做的价值:
let value = this.formSaisie.value.options[0];
value.cargoA;
但我无法为字段设置值。
你可以通过 this.formSaisie.get('cargoA').setValue(someValueYouWouldLikeToSet)
编辑:
所以这样做:this.formSaisie.get('options').get('cargoA').setValue(someValue)
- 应该有效
this.options().at(0).get('cargoA').setValue(someValue)
这会将表单数组中索引为 0 的组的 cargoA 属性 设置为 someValue
旁注:强烈建议不要在同一表单中使用 ngModel 和反应式表单。他们会相互冲突,有时无法预测。
我正在使用响应式开发 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 class="row mb-5" style="height: 23px;" *ngFor="let option of options().controls; let i = index" [formGroupName]="i">
<div class="col-md-1">
<input formControlName="date" type="text" formControlName="date" hidden [(ngModel)]="listDate[i]">
<p>{{listDate[i]}}</p>
</div>
<div class="col-md-2">
<mat-form-field class="inputGridItem" 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>
.............
代码受以下启发the enter method
我的问题是如何获取或设置 属性(field) 的值 例如,为了获得我可以做的价值:
let value = this.formSaisie.value.options[0];
value.cargoA;
但我无法为字段设置值。
你可以通过 this.formSaisie.get('cargoA').setValue(someValueYouWouldLikeToSet)
编辑:
所以这样做:this.formSaisie.get('options').get('cargoA').setValue(someValue)
- 应该有效
this.options().at(0).get('cargoA').setValue(someValue)
这会将表单数组中索引为 0 的组的 cargoA 属性 设置为 someValue
旁注:强烈建议不要在同一表单中使用 ngModel 和反应式表单。他们会相互冲突,有时无法预测。