在Angular 6中,可以通过使用FormGroup
和FormControl
来实现输入复选框的焦点验证。以下是一个示例代码:
FormBuilder
和Validators
:import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-checkbox-validation',
templateUrl: './checkbox-validation.component.html',
styleUrls: ['./checkbox-validation.component.css']
})
export class CheckboxValidationComponent implements OnInit {
checkboxForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.checkboxForm = this.formBuilder.group({
checkbox: ['', Validators.requiredTrue]
});
}
// 其他逻辑和方法...
}
formGroup
指令和formControlName
指令来绑定表单控件:
您必须同意条款和条件
ReactiveFormsModule
:import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// 其他导入...
ReactiveFormsModule
],
declarations: [
// 其他声明...
]
})
export class YourModule { }
这样,当复选框失去焦点时,如果未选中复选框,将会显示错误消息。请注意,这种验证方法在Firefox中有效,但在其他浏览器中可能会有所不同。