在 Angular 5.29 中包含基于正则表达式的 formBuilder 验证器中断检查

Question

所以这里是 stackblitz：

https://stackblitz.com/edit/ionic-f9kfnm

基本上，如果构造函数中的 formBuilder 代码如下所示（不包括正则表达式模式）：

this.signupForm = this.formBuilder.group({
      nickname: ['', Validators.compose([Validators.minLength(3), Validators.maxLength(20), Validators.required])],
      email: ['', Validators.compose([Validators.email, Validators.required])],
      password: ['', Validators.compose([Validators.minLength(3), Validators.maxLength(20), Validators.required])],
      ageTermsAccepted: [false, Validators.pattern('true')],
      policiesAccepted: [false, Validators.pattern('true')]
    });

昵称检查的用户体验看起来不错（警告仅在输入值无效时出现并消失。

现在，如果我添加正则表达式验证器：

this.signupForm = this.formBuilder.group({
      nickname: ['', Validators.compose([Validators.pattern('^[a-zA-Z0-9_-]$'),Validators.minLength(3), Validators.maxLength(20), Validators.required])],
      email: ['', Validators.compose([Validators.email, Validators.required])],
      password: ['', Validators.compose([Validators.minLength(3), Validators.maxLength(20), Validators.required])],
      ageTermsAccepted: [false, Validators.pattern('true')],
      policiesAccepted: [false, Validators.pattern('true')]
    });

检查没有按预期工作。

是否有这样的规则，如果我使用正则表达式，那么我只能依赖它，不能将它与其他构建验证器（如 max chars）结合使用？

Answer 1

您的正则表达式缺少量词，因此它只接受单个字符。

'^[a-zA-Z0-9_-]*$'

或者你可以指定最小和最大字符数，你可以删除 minLength 和 maxLength 验证器（除非你想要不同的验证消息）：

'^[a-zA-Z0-9_-]{3,20}$'

在 Angular 5.29 中包含基于正则表达式的 formBuilder 验证器中断检查

Inclusion of regex based validator for formBuilder breaks checks in Angular 5.29

formbuilder

angular