作者:晓云71_783 | 来源:互联网 | 2022-12-10 08:04
我有2个输入字段:名称和姓氏.我有2个按钮:提交和'添加一个人'.单击"添加人"应添加一组新字段(名称和姓氏).怎么实现呢?我找到了如何动态添加单个输入字段的解决方案,但在这里我需要添加一个集合
我的代码现在没有"添加人"功能:
import { FormControl, FormGroup, Validators } from '@angular/forms';
export class AppComponent implements OnInit {
form: FormGroup;
constructor(){}
ngOnInit(){
this.form = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(2)]),
lname: new FormControl('', [Validators.required, Validators.minLength(2)])
});
}
....
}
模板:
Name:
Last Name:
小智..
13
你需要的是什么FormArray
.给出具有两个FormControls名称和姓氏的多个元素,如您的示例中所示:https:
//stackblitz.com/edit/angular-ztueuu
这是发生了什么:
您可以像您一样定义表单组,但使用一个FormArray
类型的字段创建它
ngOnInit() {
this.form = this.fb.group({
items: this.fb.array([this.createItem()])
})
}
接下来,您定义我们上面使用的辅助方法createItem()
,使我们使用您想要乘法的控件组
createItem() {
return this.fb.group({
name: ['Jon'],
surname: ['Doe']
})
}
最后,你想要在这个集合中乘以项目的方法:
addNext() {
(this.form.controls['items'] as FormArray).push(this.createItem())
}
将其与下面的html结合使用.我们迭代数组项并显示组中的字段.这里的表单组名是数组的索引.
您可以使用扩展的项目集创建表单.
1> 小智..:
你需要的是什么FormArray
.给出具有两个FormControls名称和姓氏的多个元素,如您的示例中所示:https:
//stackblitz.com/edit/angular-ztueuu
这是发生了什么:
您可以像您一样定义表单组,但使用一个FormArray
类型的字段创建它
ngOnInit() {
this.form = this.fb.group({
items: this.fb.array([this.createItem()])
})
}
接下来,您定义我们上面使用的辅助方法createItem()
,使我们使用您想要乘法的控件组
createItem() {
return this.fb.group({
name: ['Jon'],
surname: ['Doe']
})
}
最后,你想要在这个集合中乘以项目的方法:
addNext() {
(this.form.controls['items'] as FormArray).push(this.createItem())
}
将其与下面的html结合使用.我们迭代数组项并显示组中的字段.这里的表单组名是数组的索引.
您可以使用扩展的项目集创建表单.