复选框是一种常见的表单元素,需要在 Angular 响应式表单中进行验证。可以使用 Validators.requiredTrue 来验证复选框是否已选中。
下面是一个示例,演示了如何在 Angular 中使用 Validators.requiredTrue 验证复选框:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-checkbox-validation',
template: `
`,
})
export class CheckboxValidationComponent {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
agree: [false, Validators.requiredTrue],
});
}
}
在此示例中,formGroup 绑定到包含一个 agree FormControl 的表单上。agree FormControl 使用 Validators.requiredTrue 进行验证,并且与复选框绑定。当 Form Control 不合法时,小文本 You must agree to the terms and conditions
将显示在复选框下面。
一旦用户点击复选框并同意条款和条件,Form Control 将变为合法状态,用户就可以提交表单了。