角度模板驱动的动态表单零件
角度模板驱动的动态表单零件
提问于 2020-09-23 20:21:36
我不知道如何在谷歌上找到我的问题的答案，所以我在这里提问。我必须创建一个表单的一部分，这始终是相同的，有一些输入字段，你只能填写一次每个表单。然后有一组字段，我想让用户创建多个实例。它看起来像这样:字段1，字段2，带有“添加字段3-5”的按钮，如果你点击它，你可以填写字段3-5，然后你可以提交表单或添加字段3-5的另一个实例，等等。我完全是个新手，所以我不知道有没有一个词来形容这件事。无论如何，我会感谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-24 00:01:25
Angular的FormBuilder和FormArray将帮助您轻松实现这一点。
在创建FormArray并在UI中循环访问它时，可以像定义FormControl一样定义FormGroup。
demoForm: FormGroup;
submitted = false;
output = {}
get firstName(): FormControl {
return this.demoForm.controls["firstName"] as FormControl;
}
get lastName(): FormControl {
return this.demoForm.controls["lastName"] as FormControl;
}
get optionals(): FormArray {
return this.demoForm.controls["optionals"] as FormArray;
}
constructor(private _formBuilder: FormBuilder) {
this.demoForm = this._formBuilder.group({
firstName: this._formBuilder.control('', [Validators.required]),
lastName: this._formBuilder.control('', [Validators.required]),
optionals: this._formBuilder.array([]),
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
});
}在你的HTML中
<form [formGroup]="demoForm">
<input type="text" formControlName="firstName" />
<input type="text" formControlName="lastName" />
<div formArrayName="optionals">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ -->
<div [formGroupName]="i" *ngFor="let optionals of optionals.controls; index as i;">
<!-- ^^^^^^^^^^^^^^^^^^ -->
<input type="text" formControlName="attr1" />
<input type="text" formControlName="attr2" />
</div>
</div>
</form>您可以使用类似以下内容在数组中添加或删除项：
AddOptionalItems(){
// you can add validation here on each item individually.
const group = new FormGroup({
attr1: new FormControl(''),
attr2: new FormControl(''),
});
this.optionals.push(group);
}
RemoveOptionalItems(i:number){
this.optionals.removeAt(i);
}这是一个带有更完整版本的小stackblitz。
编辑：
一篇有用的文章：https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64027859
复制相关文章
相似问题
腾讯云开发者
