[英]Angular - FormBuilder, how to group multiple Form Controls
I use Formbuilder to create a FormGroup: 我使用Formbuilder创建一个FormGroup:
myForm = this.fb.group(
{
title: [""],
fixed_grade1: [""],
fixed_value1: [""],
fixed_grade2: [""],
fixed_value2: [""],
fixed_grade3: [""],
fixed_value3: [""],
fixed_grade4: [""],
fixed_value4: [""]
});
all the fixed_grade
and fixed_value
are inputs and dropdowns. 所有fixed_grade
和fixed_value
都是输入和下拉列表。
I have 4 pairs of them, and this works correctly. 我有4对,这正常工作。
But now I would like to group these, so I don't have to access each value in my controller one by one, with myForm.get("fixed_grade1").value
for each one. 但是现在我想对它们进行分组,因此我不必一个一个地访问控制器中的每个值,每个值都带有myForm.get("fixed_grade1").value
。
But I would like that all these value are grouped in an array like: 但我希望将所有这些值分组为一个数组,例如:
myArray: [{grade, value}, [grade, value}...]
so I can access their value by: myArray[0].grade
所以我可以通过以下方式访问它们的值: myArray[0].grade
Instead of mapping each single value to a new array, I saw there is a FormArray
in FormBuilder
, I just don't seem to be able to implement it correclty. 我看到没有将每个单个值映射到一个新数组,而是看到FormBuilder
有一个FormArray
,但我似乎无法正确实现它。
What would be the correct syntax to achieve what I described, having exactly 4 pairs of grade/score, and also it's important that in my final array with all these pairs grade/score, I have only the values that are not undefined, so if in my form the user only fills one pair grade/score, then my myArray.length
will be 1. 正确地使用4对成绩/分数来实现我所描述的语法是什么,而且重要的是,在具有所有这些成绩/分数对的最终数组中,我只有未定义的值,所以如果在我的表单中,用户仅填写一对成绩/分数,那么我的myArray.length
将为1。
You have defined your FormGroup
wrong. 您定义的FormGroup
错误。 Your FormGroup
should have had a FormArray
of FormGroup
s. 您的FormGroup
应该具有FormArray
的FormGroup
。 Inside each of these FormGroup
s there should have been two FormControl
s for grade
and value
. 在每个FormGroup
的内部,应该有两个用于grade
和value
FormControl
。
Change your form to this: 将您的表单更改为此:
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);
}
This is how you'll use it in the template: 这是在模板中使用它的方式:
<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>
Here's a Sample StackBlitz for your ref. 这是供您参考的示例StackBlitz 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.