在Reactive Forms中,可以使用FormArray来管理动态的表单控件集合。FormArray是一个由FormControl或FormGroup组成的数组,用于表示一组重复的表单控件。
要检索FormArray中的项目信息,可以使用FormArray的controls属性。该属性返回一个对象,其中包含FormArray中每个控件的信息。可以通过遍历这个对象来获取每个控件的值、状态等信息。
以下是一个示例代码,演示如何检索FormArray中的项目信息:
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
<form [formGroup]="myForm">
<div formArrayName="items">
<div *ngFor="let item of items.controls; let i = index">
<input [formControlName]="i" placeholder="Item {{ i + 1 }}">
</div>
</div>
</form>
<button (click)="retrieveItems()">Retrieve Items</button>
`,
})
export class FormComponent {
myForm: FormGroup;
get items() {
return this.myForm.get('items') as FormArray;
}
constructor() {
this.myForm = new FormGroup({
items: new FormArray([
new FormControl('Item 1'),
new FormControl('Item 2'),
new FormControl('Item 3'),
]),
});
}
retrieveItems() {
const itemValues = this.items.controls.map(control => control.value);
console.log(itemValues);
}
}
在上述示例中,我们创建了一个包含FormArray的表单,并使用ngFor指令动态生成多个输入框。通过调用retrieveItems方法,我们可以获取FormArray中每个控件的值,并将其打印到控制台。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。在实际应用中,你可以根据FormArray中的项目信息执行各种操作,例如添加、删除、更新等。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅供参考,具体产品选择应根据实际需求和情况进行评估。
领取专属 10元无门槛券
手把手带您无忧上云