下面是一个使用Angular的响应式表单和表单数组的示例代码:
首先,在你的组件类中导入所需的模块和依赖项:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } 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(): FormArray {
return this.form.get('items') as FormArray;
}
addItem() {
const item = this.fb.group({
name: ['', Validators.required],
quantity: ['', Validators.required]
});
this.items.push(item);
}
removeItem(index: number) {
this.items.removeAt(index);
}
onSubmit() {
console.log(this.form.value);
}
}
然后,在你的模板文件中使用表单数组:
在上面的示例中,我们使用FormBuilder
创建了一个form
对象和一个items
表单数组。在addItem
方法中,我们使用fb.group
创建一个新的表单组,并将其添加到items
表单数组中。在removeItem
方法中,我们使用items.removeAt
从表单数组中移除指定的表单组。在onSubmit
方法中,我们可以通过this.form.value
来获取整个表单的值。
以上代码演示了一个简单的表单数组的示例,你可以根据自己的需求进行扩展和修改。