Angular 6 - 反应式表单验证模式不起作用答案

【问题标题】：Angular 6 - reactive form validation pattern doesn't workAngular 6 - 反应式表单验证模式不起作用
【发布时间】：2018-07-29 22:22:00
【问题描述】：

我有一个 Angular 6 响应式表单并尝试使用正则表达式模式验证密码，但它不起作用。

               <div class="form-group">
                    <label for="password">Password</label>
                    <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.required">Required</div>
                        <div *ngIf="f.password.errors.pattern">Not valid</div>
                    </div>
                </div>

我使用的正则表达式是这样的：

 ngOnInit() {
     this.registerForm = this.formBuilder.group({
           password: ['', [Validators.required, Validators.pattern('^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$')]],

      });
  }

无论我在密码中输入什么，我都会在 ui Not valid 中收到错误消息

知道我做错了什么吗？

【问题讨论】：

您可以在此处查看我的回答，了解样式响应式表单控件的状态stackoverflow.com/questions/51583952/…
我不知道你的正则表达式是什么意思，对不起，你能在这里查看我关于模式验证的答案stackoverflow.com/questions/51551831/…

标签： angular angular6 angular-reactive-forms angular-validation angular-validator

【解决方案1】：

您需要删除 ('') 并将 (//) 放入模式方法的参数中。应该是：

password: ['', [Validators.required, Validators.pattern(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/)]]

【讨论】：

谢谢！工作。 (?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&]) 需要正则表达式而不是字符串。

【解决方案2】：

您必须在 d 之前添加第二个反斜杠并删除 '^' 和 '$'，如下例所示：

'(?=.*[A-Za-z])(?=.*\\d)(?=.*[$@$!%*#?&])[A-Za-z\\d$@$!%*#?&]{8,}'

【讨论】：