在Angular 5中,可以使用formGroups
来绑定复选框。下面是一个示例的解决方法:
首先,确保你已经导入了所需的模块和服务:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';
然后,在组件类中创建一个FormGroup
并定义复选框的初始状态:
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
exampleForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
// 初始化FormGroup
this.exampleForm = this.formBuilder.group({
checkboxes: this.formBuilder.array([
new FormControl(false),
new FormControl(false),
new FormControl(false)
])
});
}
get checkboxes(): FormArray {
return this.exampleForm.get('checkboxes') as FormArray;
}
}
然后,在模板中使用formGroup
和formArrayName
来绑定复选框:
最后,你可以通过订阅valueChanges
来监控复选框的变化:
ngOnInit() {
// ...
this.exampleForm.valueChanges.subscribe(value => {
console.log(value.checkboxes);
});
}
这样,当复选框的状态发生变化时,就会在控制台中打印出相应的值。