我使用 Formbuilder 创建 FormGroup:
myForm = this.fb.group(
{
title: [""],
fixed_grade1: [""],
fixed_value1: [""],
fixed_grade2: [""],
fixed_value2: [""],
fixed_grade3: [""],
fixed_value3: [""],
fixed_grade4: [""],
fixed_value4: [""]
});
所有fixed_grade
和fixed_value
都是输入和下拉菜单。
我有 4 对,并且工作正常。
但现在我想将它们分组,这样我就不必逐一访问 Controller 中的每个值,每个值都使用 myForm.get("fixed_grade1").value
.
但我希望所有这些值都分组在一个数组中,例如:
myArray: [{grade, value}, [grade, value}...]
这样我就可以通过以下方式访问它们的值:myArray[0].grade
我没有将每个单个值映射到一个新数组,而是在FormBuilder
中看到了一个FormArray
,我只是似乎无法正确实现它.
实现我所描述的内容的正确语法是什么,恰好有 4 对成绩/分数,而且重要的是,在包含所有这些成绩/分数对的最终数组中,我只有未定义的值,所以如果在我的表单中用户只填写一对成绩/分数,那么我的 myArray.length
将为 1。
最佳答案
您的 FormGroup
定义错误。您的 FormGroup
应该有一个由 FormGroup
组成的 FormArray
。在每个 FormGroup
中,应该有两个 FormControl
,分别用于 grade
和 value
。
将您的表单更改为:
const grades = [
{grade: 'Grade 1', value: 'Value 1'},
{grade: 'Grade 2', value: 'Value 2'},
{grade: 'Grade 3', value: 'Value 3'},
{grade: 'Grade 4', value: 'Value 4'}
]
myForm = this.fb.group({
title: [],
grades: this.fb.array(this.grades.map(grade => this.fb.group({
grade: [grade.grade],
value: [grade.value]
}))),
});
// OR
myForm = this.fb.group({
title: [],
grades: this.fb.array(this.grades.map(grade => this.fb.group({
grade: [],
value: []
}))),
});
...
get gradesArray() {
return (<FormArray>this.myForm.get('grades')).controls;
}
...
getArrayGroupControlByIndex(index) {
return (<FormArray>this.myForm.get('grades'))
.at(index);
}
这是您在模板中使用它的方式:
<form [formGroup]="myForm">
<input type="text" formControlName="title">
<br>
<div formArrayName="grades">
<div *ngFor="let gradeGroup of gradesArray; let i = index;">
<div [formGroupName]="i">
Group {{ i + 1 }}
<input type="text" formControlName="grade">
<input type="text" formControlName="value">
</div>
<br>
</div>
</div>
</form>
这是一个Sample StackBlitz供您引用。
关于javascript - Angular - FormBuilder,如何对多个表单控件进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52965415/