Angular 6 - 验证器模式不起作用

Question

我在 Angular 6 中使用响应式(Reactive)表单，并尝试对密码字段进行一些验证。基本上需要8个字符以上，至少包含1个大写字母，至少包含1个符号。

我测试过的正则表达式是 ^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9, })

这是我的登录组件 ts 的摘录:

  ngOnInit() {
        this.loginForm = this.formBuilder.group({
            userName: ['Username', [Validators.required]],
            password: ['Password', [Validators.pattern("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})")]]            
        });
    }

这是我的表单组 div:

 <div class="form-group">
                      <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">              
                          <div *ngIf="f.password.errors.pattern">Password must contain more than 8 characters, 1 upper case letter, and 1 special character</div>
                      </div>
                  </div>

基本上密码即使看起来是正确的也不会通过验证。任何提示将不胜感激。

Answer 1

ng-pattern 似乎将正则表达式作为参数(就像在 angularJs 中一样):

Validators.pattern(new RegExp("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,}))")

你也可以使用/..../

Validators.pattern(/^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})/)

应该工作 ;)