要在保存事件上绑定formArray的值,你可以使用Angular的Reactive Forms。下面是一个示例代码,展示了如何在Angular 6中实现这个功能:
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 MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
items: this.fb.array([])
});
}
get itemForms() {
return this.myForm.get('items') as FormArray;
}
addItem() {
const item = this.fb.group({
name: '',
description: ''
});
this.itemForms.push(item);
}
deleteItem(index) {
this.itemForms.removeAt(index);
}
save() {
console.log(this.myForm.value);
}
}
在这个示例中,我们创建了一个名为myForm
的表单组,它包含一个名为items
的formArray。addItem()
方法用于向formArray中添加一个新的表单组,deleteItem()
方法用于删除指定索引的表单组,save()
方法用于在保存按钮点击时打印表单组的值。
希望这个示例能够帮助你实现在保存事件上绑定formArray的值。