Angular: 如何遍历嵌套在已嵌套在不同 FormGroup 中的 FormGroup 中的 FormArray?
Angular: how to loop through a FormArray which is nested in a FormGroup which is already nested in a different FormGroup?
我使用这段代码创建我的表单:
@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>
也可以直接输入HTML如下:
*ngFor="let threshold of taskForm['controls'].configuration['controls'].thresholds['controls']; let i = index;"
或者您可以在组件中创建一个 get 属性 并在 html 或 ts 文件中使用。
get formThresholds():FormArray{
return this.taskForm.get('configuration.thresholds') as FormArray;
}
感谢 Gourav Garg 和我的摆弄,我想出了一个答案。
问题是我错过了一个父 div 标记,它引用 formArray 所属的 formGroup - 'configuration' 表单组。
所以对于这个表单结构:
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>
我使用这段代码创建我的表单:
@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>
也可以直接输入HTML如下:
*ngFor="let threshold of taskForm['controls'].configuration['controls'].thresholds['controls']; let i = index;"
或者您可以在组件中创建一个 get 属性 并在 html 或 ts 文件中使用。
get formThresholds():FormArray{
return this.taskForm.get('configuration.thresholds') as FormArray;
}
感谢 Gourav Garg 和我的摆弄,我想出了一个答案。
问题是我错过了一个父 div 标记,它引用 formArray 所属的 formGroup - 'configuration' 表单组。
所以对于这个表单结构:
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>