在角度模板驱动的表单中使用“Validators.requiredTrue”

Using "Validators.requiredTrue" in a angular template driven form

提问人:Jean Pacher 提问时间:7/19/2017 更新时间:11/17/2023 访问量:8877

问:

在允许用户注册之前,我需要验证用户是否选中了“TOS”复选框。我想使用 requiredTrue 验证器来执行此操作,但我在文档中找不到在模板驱动表单中使用此验证器的方法。可能吗?如果是这样,您能举例说明吗?

角度 验证 angular2-template

评论

0赞 Jean Pacher 7/20/2017
我最终创建了自己的验证器。如果有人需要与我类似的东西,那就 gist.github.com/jeanpchr/5c182fe50554c3699aab4f1e0d9cf4f8
0赞 Andrea Gherardi 11/17/2017
嗨,我正在尝试做同样的事情,但显然复选框被完全忽略了。如果我将自定义验证器附加到文本输入,它可以正常工作。如果我将它附加到复选框,它就不会运行。没有错误,没有,我的指令(构造函数+验证方法)中的代码没有执行。有什么线索吗?

答:

0赞 Braden W 3/24/2018 #1

当验证是否已使用 angular 表单验证选中复选框时,您只需添加“必需”验证器即可。这适用于模板驱动和反应式表单。对于模板驱动的表单,复选框的html将如下所示:

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

或者,如果您使用的是有角度的材料:

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

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

评论

0赞 HasBert 8/26/2022
requiredTrue验证值 .的用法与 相同。=== truerequiredTruerequired
0赞 HasBert 8/26/2022 #2

就像 @braden-w 说的,你可以像指令一样使用:requiredTruerequired

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

我在 Ionic 中遇到了一个问题,该指令在标签上不起作用。它具有与 完全相同的功能。因此,我创建了自己的指令。如果我在内部调用此指令,它以某种方式起作用。requiredTrue<ion-checkbox>requiredcheckboxRequiredTrueValidators.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);
  }
}