我有两个输入字段:姓名和姓氏。
我有两个按钮:提交和“添加人员”。单击“添加人员”应添加一组新字段(姓名)。
如何实现这一目标?我找到了如何动态添加单个输入字段的解决方案,但在这里我需要添加一组
我的代码现在没有“添加人员”功能:
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)])
});
}
....
}
模板:
<form [formGroup]="form" (ngSubmit)="submit()">
Name: <input type="text" formControlName="name">
Last Name: <input type="text" formControlName="lname">
<button type="button">Add a Person</button>
<button type="submit">Submit</button>
</form>
你需要的是FormArray
。给定具有两个 FormControls 名称和姓氏的多个元素,如示例中所示,您可以执行以下操作:https://stackblitz.com/edit/angular-ztueuu
这是发生的事情:
您像以前一样定义表单组,但使用一个字段创建它FormArray
type
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 结合起来。我们正在迭代数组项并显示组中的字段。这里的表单组名是数组的索引。
<form [formGroup]="form" (ngSubmit)="submit()">
<div formArrayName="items"
*ngFor="let item of form.controls['items'].controls; let i = index">
<div [formGroupName]="i">
<input formControlName='name'>
<input formControlName='surname'>
</div>
</div>
<button type="button" (click)="addNext()">Add Next</button>
<button type="submit">Submit</button>
</form>
您可以使用扩展的项目集创建表单。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)