Angular13中的自定义验证器，强制检查至少一个复选框不起作用
下面是一个简单的解决方法，该方法使用Angular 13的自定义验证器来确保至少一个复选框是选中的。
- 首先，我们需要定义一个自定义验证器函数。此函数将接收一个FormGroup作为参数，并返回一个对象，其中包含一个名为'atLeastOneSelected'的属性。
import { ValidatorFn, FormGroup } from '@angular/forms';
export const atLeastOneValidator: ValidatorFn = (fg: FormGroup) => { const valuesSelected = Object.keys(fg.controls) .map(key => fg.controls[key].value) .filter(value => !!value); const atLeastOne = valuesSelected.length > 0; return atLeastOne ? null : { atLeastOneSelected: true }; }
- 然后，我们需要在组件中使用该自定义验证器。我们可以使用'Validators.compose'函数将它与其他验证器组合起来，例如'Required'验证器。
import { Validators } from '@angular/forms'; import { atLeastOneValidator } from './at-least-one-validator';
...
checkboxGroup: FormGroup = this.fb.group({ checkboxOption1: [false], checkboxOption2: [false], checkboxOption3: [false] }, { validators: Validators.compose([ Validators.required, // This is just an example, you can remove this if not needed atLeastOneValidator ]) });
- 最后，我们可以在HTML模板中使用我们的自定义验证器，并将'atLeastOneSelected'属性与验证消息链接起来。
这就是一个简单的解决方法，它使用自定义验证器检查至少一个复选框已被选中。