Angular 反应式表单验证器中的密码验证错误

Question

使用 Angular 响应式表单验证密码，至少要与密码匹配：

|*> 1 lowercase
|*> 1 uppercase
|*> 1 numeric
|*> 8 char longer

使用正则表达式：

"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})"

Html代码：

<form [formGroup]="NamFomNgs">

    <label>Email : 
        <input type="email" name="MylHtm" formControlName="MylNgs">
    </label><br>
        <div class="ErrMsgCls" *ngIf="(NamFomNgs.controls['MylNgs'].touched || NamFomNgs.controls['MylNgs'].dirty) && 
            !NamFomNgs.controls['MylNgs'].valid">
            <span *ngIf="NamFomNgs.controls['MylNgs'].errors.required">This field is required</span>
            <span *ngIf="NamFomNgs.controls['MylNgs'].errors.email">Enter valid email</span>
        </div><br>

    <label>Password : 
        <input type="text" name="PwdHtm" formControlName="PwdNgs">
    </label><br>
        <div class="ErrMsgCls" *ngIf="(NamFomNgs.controls['PwdNgs'].touched || NamFomNgs.controls['PwdNgs'].dirty) && 
            !NamFomNgs.controls['PwdNgs'].valid">
            <span *ngIf="NamFomNgs.controls['PwdNgs'].errors.required">This field is required</span>
            <span *ngIf="NamFomNgs.controls['PwdNgs'].errors.pattern">Enter valid password</span>
        </div><br>

    <button [disabled]="!NamFomNgs.valid">Submit</button>
</form>

TypeScript 代码：

NamFomNgs:FormGroup;

constructor(private NavPkjVaj: ActivatedRoute, private HtpCncMgrVaj: HttpClient,private FomNgsPkjVaj: FormBuilder){

    this.NamFomNgs = FomNgsPkjVaj.group(
        {
            MylNgs:[null,Validators.compose([
                Validators.required,
                Validators.email ])],
            PwdNgs:[null,Validators.compose([
                Validators.required,
                Validators.pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})")])]
        });
}

输出的屏幕截图：

当我尝试 https://regex101.com/

相同的 reg exp 显示对要求有效。但它在 Angular 中无效。请以正确的方式帮助我解决这个问题。

Answer 1

您必须在您的正则表达式中捕捉一些东西，您只使用了积极的前瞻组。只需像这样更改长度部分：

"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"

Angular 反应式表单验证器中的密码验证错误

Password Validation error in Angular Reactive Form Validator

javascript

regex

validation

angular

angular-reactive-forms

使用正则表达式：

Html代码：

TypeScript 代码：