在Angular2中,可以通过使用表单控件的valueChanges属性来监听复选框的更改并获取表单的值。
首先,需要在组件类中引入FormControl和FormGroup类,以及使用FormBuilder来创建表单控件。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
<form [formGroup]="myForm">
<label>
<input type="checkbox" formControlName="myCheckbox"> Checkbox
</label>
</form>
`
})
export class ExampleComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
myCheckbox: false
});
this.myForm.get('myCheckbox').valueChanges.subscribe(value => {
console.log(value); // 在这里获取复选框的值
});
}
}
在上述示例中,我们创建了一个名为myForm的FormGroup,并在其中添加了一个名为myCheckbox的FormControl来表示复选框。初始值设置为false。
然后,我们使用valueChanges方法来订阅myCheckbox的值更改事件,并在回调函数中获取复选框的值。在这个例子中,我们简单地将值打印到控制台上,你可以根据实际需求进行相应的处理。
领取专属 10元无门槛券
手把手带您无忧上云