生成FormArray项目的步骤如下:
formArrayName
指令来指定FormArray的名称,并将其绑定到组件类中的一个FormControl属性。<form [formGroup]="form">
<div formArrayName="items">
<div *ngFor="let item of items.controls; let i = index">
<input type="text" [formControlName]="i">
</div>
</div>
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-form-array',
templateUrl: './form-array.component.html',
styleUrls: ['./form-array.component.css']
})
export class FormArrayComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
items: this.fb.array([])
});
}
get items() {
return this.form.get('items') as FormArray;
}
}
ngOnInit
方法中动态添加FormControl到FormArray中,并为每个FormControl设置初始值。ngOnInit() {
this.form = this.fb.group({
items: this.fb.array([
this.createItem('Item 1'),
this.createItem('Item 2'),
this.createItem('Item 3')
])
});
}
createItem(value: string) {
return this.fb.control(value);
}
addItem() {
this.items.push(this.createItem(''));
}
removeItem(index: number) {
this.items.removeAt(index);
}
addItem
和removeItem
方法,你可以在运行时动态地添加或删除FormArray中的项目。<button (click)="addItem()">Add Item</button>
<div *ngFor="let item of items.controls; let i = index">
<input type="text" [formControlName]="i">
<button (click)="removeItem(i)">Remove Item</button>
</div>
生成FormArray项目的概念是创建一个可以动态添加和删除项目的表单控件集合。FormArray可以用于收集和管理表单中的重复性数据项,例如一组输入字段或复选框。通过使用Angular的表单控件和FormBuilder服务,我们可以轻松地创建和操作FormArray对象。
FormArray的优势包括:
应用场景:
腾讯云相关产品和产品介绍链接地址:
请注意,这里只提供了腾讯云相关产品作为示例,并非对其他品牌商的评价或推荐。
领取专属 10元无门槛券
手把手带您无忧上云