在 HTML 模板中,给复选框绑定一个 FormGroup 对象,然后在 FormGroup 中定义一个 FormControl 对象,并用 [formControl] 指令将其与复选框绑定。接着可以在组件类中将 FormGroup 和 FormControl 实例化,并为 FormControl 设置初始值与变化时的回调函数,以进行对复选框选中状态的控制。
示例代码如下:
HTML 模板:
组件类:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html'
})
export class MyFormComponent {
public myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
isChecked: [false] // false 为初始化时的选中状态
});
this.myForm.controls['isChecked'].valueChanges.subscribe(checked => {
console.log(checked);
// 在此处进行复选框选中状态的控制
});
}
}