在Angular 5.29中包含基于regex的formBuilder中断检查验证程序

下面是闪电战:

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

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')]
    });

昵称检查的用户体验看起来不错(只有当输入值无效时,警告才会出现并消失)。

现在,如果我添加regex验证器:

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')]
    });

支票没有按预期进行。

有没有一条规则,如果我使用regex,那么我只能依赖它,不能将它与其他内置验证器(如max chars)结合使用?