在Angular中,可以使用FormArray
和FormGroup
来处理表单数组复选框。下面是一个示例代码:
首先,创建一个FormGroup
来包含所有的复选框选项:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-checkbox-array',
template: `
`,
})
export class CheckboxArrayComponent implements OnInit {
checkboxForm: FormGroup;
constructor() { }
ngOnInit() {
this.checkboxForm = new FormGroup({
checkboxOptions: new FormArray([])
});
// 添加初始复选框选项
this.addCheckboxOption('Option 1');
this.addCheckboxOption('Option 2');
this.addCheckboxOption('Option 3');
}
// 添加复选框选项
addCheckboxOption(option: string) {
const control = new FormControl(false);
(this.checkboxForm.get('checkboxOptions') as FormArray).push(control);
}
// 提交表单
onSubmit() {
const selectedOptions = this.checkboxForm.value.checkboxOptions
.map((value, index) => value ? this.checkboxOptions.controls[index].value : null)
.filter(value => value !== null);
console.log(selectedOptions);
}
}
在上面的代码中,我们使用FormArray
来创建一个名为checkboxOptions
的数组,用于存储复选框选项。在ngOnInit
方法中,我们添加了初始的复选框选项。
在模板中,我们使用*ngFor
指令来遍历checkboxOptions
数组并创建对应的复选框。[formControlName]
指令用于绑定每个复选框的表单控件。
在addCheckboxOption
方法中,我们使用FormArray
的push
方法向checkboxOptions
数组中添加新的复选框选项。
在onSubmit
方法中,我们通过遍历checkboxOptions
数组来获取选中的复选框选项的值,并将其打印到控制台上。
记得在模块中导入并将CheckboxArrayComponent
添加到declarations
和exports
数组中,以便在应用中使用该组件。
这就是解决“Angular 表单数组复选框”问题的一个示例代码。希望对你有帮助!
上一篇:Angular 表单控件验证
下一篇:Angular 表单无法提交