在角度模板驱动形式中使用“Validators.requiredTrue”

Question

我需要验证用户在允许注册之前是否已选中“TOS”复选框。我想使用 requiredTrue 验证器 来执行此操作，但我在文档中找不到以模板驱动形式使用此验证器的方法。是否可以？如果是的话，您能举个例子吗？

Answer 1

当使用角度表单验证验证是否选中复选框时，您只需添加“必需”验证器即可。这适用于模板驱动和反应式表单。对于模板驱动的表单，复选框的 html 看起来像这样：

<input type="checkbox" name="TOS" ngModel required>

或者如果您使用的是有角材料：

<mat-checkbox name="TOS" ngModel required></mat-checkbox>

以上两个示例都会将表单有效性设置为无效，直到用户选中该复选框。

Answer 2

就像@braden-w所说，你可以像

requiredTrue

指令一样使用

required

：

<input type="checkbox" name="TOS" ngModel requiredTrue>

我在 Ionic 中遇到了问题，其中

requiredTrue

指令不适用于

<ion-checkbox>

标签。它具有与

required

完全相同的功能。因此我创建了自己的

checkboxRequiredTrue

指令。如果我在该指令中调用

Validators.requiredTrue

，它会以某种方式起作用。

@Directive({
  selector: '[checkboxRequiredTrue]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: CheckboxRequiredTrueDirective,
      multi: true,
    },
  ],
})
export class CheckboxRequiredTrueDirective implements Validator {
  validate(control: FormControl): ValidationErrors | null {
    return Validators.requiredTrue(control);
  }
}