Angular FormArray是Angular框架中用于处理表单数组的一种数据结构。它允许我们动态地添加、删除和修改表单控件。
要获取FormArray的摘要,可以通过以下步骤实现:
<form [formGroup]="myForm">
<div formArrayName="myArray">
<div *ngFor="let control of myForm.get('myArray').controls; let i = index">
<input [formControlName]="i">
</div>
</div>
</form>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
myArray: this.fb.array([])
});
}
getFormArraySummary() {
const formArray = this.myForm.get('myArray') as FormArray;
const summary = formArray.value.map(control => control.value).join(', ');
console.log(summary);
}
}
在上面的代码中,getFormArraySummary方法获取了FormArray的引用,并使用map方法将每个表单控件的值提取出来,然后使用join方法将它们连接成一个摘要字符串。最后,我们可以将摘要打印到控制台或进行其他操作。
需要注意的是,FormArray的value属性返回一个数组,其中每个元素都是一个FormGroup实例,包含了表单控件的值。因此,我们需要使用control.value来获取每个表单控件的值。
推荐的腾讯云相关产品和产品介绍链接地址:
云+社区技术沙龙[第10期]
云+社区技术沙龙[第21期]
高校公开课
136届广交会企业系列专题培训
云+社区技术沙龙[第28期]
Techo Youth高校公开课
小程序云开发官方直播课(应用开发实战)
领取专属 10元无门槛券
手把手带您无忧上云