我使用以下代码块创建表单:
@Input() fetchedTask: Task;
taskForm: FormGroup;
formThresholds: FormArray;
this.taskForm = this._formBuilder.group({
taskId: null,
groupId: this.groupId,
name: ["", [Validators.required]],
taskType: this.taskTypeId,
etc.
configuration: this._formBuilder.group({
name: ["", Validators.required],
path: ["", Validators.required],
thresholds: this._formBuilder.array([])
})
});
我稍后使用setValue()
设置表单的值:
this.taskForm.controls["taskId"].setValue(this.fetchedTask.taskId);
我使用以下方法设置FormArray的值:
this.fetchedTask.configuration.thresholds.forEach((x)=>{
this.addItem(x.value, x.name);
})
addItem(value: number, name: string): void {
this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
this.formThresholds.push(this.createItem(value, name));
}
createItem(value: number, name: string): FormGroup{
return this._formBuilder.group({
value: value,
name: name
});
}
我真的不知道如何遍历数组值并以填充值的形式显示它们。
我尝试过但没有成功:
<div *ngFor="let threshold of taskForm.get('configuration.thresholds') let i = index;">
<div [formGroupName]="i">
<input formControlName="name" placeholder="Threshold name">
<input formControlName="value" placeholder="Threshold value">
</div>
</div>
答案 0 :(得分:2)
您可以直接将HTML插入如下:
*ngFor="let threshold of taskForm['controls'].configuration['controls'].thresholds['controls']; let i = index;"
或者您可以在component中创建一个get属性,并在html或ts文件中使用它。
get formThresholds():FormArray{
return this.taskForm.get('configuration.thresholds') as FormArray;
}
答案 1 :(得分:0)
感谢Gourav Garg和我的摆弄,我想出了一个答案。
问题是我错过了一个父div标签,该标签指向formArray所属的formGroup-“配置”表单组。
对于此表单结构:
this.taskForm = this._formBuilder.group({
taskId: null,
groupId: this.groupId,
name: ["", [Validators.required]],
taskType: this.taskTypeId,
etc.
configuration: this._formBuilder.group({
name: ["", Validators.required],
path: ["", Validators.required],
thresholds: this._formBuilder.array([])
})
});
get thresholds(): FormArray{
return this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
}
如果要在页面上显示阈值,则需要4个标签。 示例:
<form [formGroup]="taskForm">
<div formGroupName="configuration">
<div formArrayName="thresholds"
*ngFor="let threshold of this.taskRunProfileForm['controls'].configuration['controls'].thresholds['controls']; let i = index;">
<div [formGroupName]="i">
{{name.value}}
{{value.value}}
</div>
</div>
</div>
</form>