Javascript Angular-FormBuilder,如何对多个表单控件进行分组
我使用Formbuilder创建FormGroup:Javascript Angular-FormBuilder,如何对多个表单控件进行分组,javascript,angular,forms,formbuilder,formgroups,Javascript,Angular,Forms,Formbuilder,Formgroups,我使用Formbuilder创建FormGroup: myForm = this.fb.group( { title: [""], fixed_grade1: [""], fixed_value1: [""], fixed_grade2: [""], fixed_value2: [""],
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对,这是正确的
但现在我想对这些值进行分组,这样我就不必逐个访问控制器中的每个值,每个值都使用myForm.get(“fixed_grade1”).value
但我希望所有这些值都分组在一个数组中,如:
myArray: [{grade, value}, [grade, value}...]
因此,我可以通过以下方式访问它们的值:myArray[0]。grade
我没有将每个值映射到一个新数组,而是看到FormBuilder
中有一个FormArray
,我似乎无法正确地实现它
要实现我所描述的,正确的语法是什么,正好有4对grade/score,还有一点很重要,就是在所有这些grade/score对的最终数组中,我只有未定义的值,因此如果在我的表单中,用户只填写一对grade/score,然后我的
myArray.length
将是1。您的表单组定义错误。您的FormGroup
应该有FormArray
的FormGroup
s。在每个FormGroup
s中,应该有两个FormControl
s用于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);
}
const等级=[
{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({
标题:[],
grades:this.fb.array(this.grades.map(grade=>this.fb.group({
年级:[年级.年级],
价值:[等级.价值]
}))),
});
//或
myForm=this.fb.group({
标题:[],
grades:this.fb.array(this.grades.map(grade=>this.fb.group({
职等:[],
值:[]
}))),
});
...
获取gradesArray(){
return(this.myForm.get('grades')).controls;
}
...
getArrayGroupControlByIndex(索引){
return(this.myForm.get('grades'))
.at(索引);
}
以下是在模板中使用它的方式:
<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>
群{i+1}
这是给你的参考的一个例子。好的,我会试试这个,我已经试过了:fixed_pairs:this.fb.array([this.createPairs()]),然后是方法createPairs->createPairs():FormGroup{返回this.fb.group({grade:,score:“});}但是我遇到了错误,你的方法似乎很清楚,我会尝试一下,让你知道另外一个问题,关于我的form builder之前是如何设置的,在我看来,每个值都有一个formControlName=“fixed_value1”,如果我按照您的方式,我如何在模板中为formBuilder数组的每个值分配一个输入或下拉列表?就是这样,工作非常完美,正是我所需要的!最后一件事,如果对于表单生成器的另一个字段的单个值,我检索的数据如下:myForm.get(“title”).value,并使用.valueChanges订阅更改,那么我应该如何访问这个新表单数组的特定值?myForm.get(“grades”)[x].grade.value?其中x是我要访问的对象的索引?同时将你的答案标记为正确答案!感谢you@AJ989,请看一下我刚刚添加到答案中的getArrayGroupControlByIndex
方法。是的,我在stackoverflow上也找到了解决方案。谢谢,我正在尝试找出最后一件事,如何手动设置我刚才使用的其他单个值的值。get(“xx”).setValue,我正在尝试:(this.myForm.get('grades')).at(index.grade.setValue(x);但它似乎不起作用!