以下是一个使用Angular表单构建对象数组的示例代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-form-array',
templateUrl: './form-array.component.html',
styleUrls: ['./form-array.component.css']
})
export class FormArrayComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
items: this.fb.array([])
});
}
get itemForms() {
return this.form.get('items') as FormArray;
}
addItem() {
const item = this.fb.group({
name: '',
quantity: 0
});
this.itemForms.push(item);
}
removeItem(index: number) {
this.itemForms.removeAt(index);
}
}
在这个示例中,我们使用FormBuilder
创建了一个包含表单控件数组的表单组。addItem()
方法用于向数组添加新的表单控件,removeItem()
方法用于从数组中移除指定位置的表单控件。
在模板中,我们使用ngFor
指令遍历表单控件数组,并为每个表单控件创建一个嵌套的formGroupName
。通过formControlName
绑定每个表单控件的值。
最后,我们使用addItem()
方法和removeItem()
方法分别在模板中添加和移除表单控件。
上一篇:Angular 表单总是无效的
下一篇:Angular 表格