下面是一个使用Angular和Mat表格处理表单数组的示例代码:
HTML模板:
组件代码:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'app-form-array-example',
templateUrl: './form-array-example.component.html',
styleUrls: ['./form-array-example.component.css']
})
export class FormArrayExampleComponent implements OnInit {
myForm: FormGroup;
displayedColumns = ['name', 'email', 'actions'];
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
formArray: this.formBuilder.array([])
});
this.addFormArrayItem();
}
get formArray(): FormArray {
return this.myForm.get('formArray') as FormArray;
}
addFormArrayItem() {
const formGroup = this.formBuilder.group({
name: '',
email: ''
});
this.formArray.push(formGroup);
}
removeFormArrayItem(index: number) {
this.formArray.removeAt(index);
}
getControl(index: number, fieldName: string) {
return this.formArray.controls[index].get(fieldName) as FormControl;
}
submitForm() {
console.log(this.myForm.value);
}
}
在这个示例中,我们使用Angular的响应式表单来创建一个表单组,其中包含一个表单数组。表单数组中的每个项都对应一个表格行,其中包含一个文本输入框用于输入名称和电子邮件,以及一个删除按钮。
通过调用addFormArrayItem
函数,我们可以添加一个新的表单数组项。通过调用removeFormArrayItem
函数,我们可以删除指定索引的表单数组项。
getControl
函数用于获取指定索引和字段名称的表单控件。
在表单提交时,我们可以通过this.myForm.value
获取整个表单的值,并进行进一步的处理。
请注意,上述代码中的formArrayName
和dataSource
属性是Angular Material中的表格和数据源指令,需要在应用中引入相应的模块并进行配置。