add new password validator

src/app/pages/pages.component.html

@@ -116,13 +116,25 @@
                         <input type="password" nz-input formControlName="newPassword" placeholder="新密码" (ngModelChange)="updateConfirmValidator()">
                         <nz-form-explain *ngIf="validateForm.get('newPassword').dirty && validateForm.get('newPassword').errors">
                             <ng-container *ngIf="validateForm.get('newPassword')?.hasError('required')">
-                                请输入新密码!
+                                请输入新密码!<br/>
                             </ng-container>
                             <ng-container *ngIf="validateForm.get('newPassword')?.hasError('minlength')">
-                                最小2个字符!
+                                最小8个字符!<br/>
                             </ng-container>
                             <ng-container *ngIf="validateForm.get('newPassword')?.hasError('maxlength')">
-                                最大15个字符!
+                                最大15个字符!<br/>
+                            </ng-container>
+                            <ng-container *ngIf="validateForm.get('newPassword')?.hasError('hasNumber')">
+                                <br/>必须有数字!
+                            </ng-container>
+                            <ng-container *ngIf="validateForm.get('newPassword')?.hasError('hasSpecialCharacters')">
+                                必须有特殊字符!<br/>
+                            </ng-container>
+                            <ng-container *ngIf="validateForm.get('newPassword')?.hasError('hasCapitalCase')">
+                                必须有大写字母!<br/>
+                            </ng-container>
+                            <ng-container *ngIf="validateForm.get('newPassword')?.hasError('hasSmallCase')">
+                                必须有小写字母!
                             </ng-container>
                         </nz-form-explain>
                     </nz-form-control>
@@ -135,15 +147,10 @@
                             <ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('required')">
                                 请再次输入新密码!
                             </ng-container>
-                            <ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('confirm')">
+                            <ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('NoPassswordMatch')">
                                 两次密码不一致!
                             </ng-container>
-                            <ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('minlength')">
+                            
-                                最小2个字符!
-                            </ng-container>
-                            <ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('maxlength')">
-                                最大15个字符!
-                            </ng-container>
                         </nz-form-explain>
                     </nz-form-control>
                 </nz-form-item>

src/app/pages/pages.component.ts

@@ -5,6 +5,9 @@ import { OperateSpinServiceService } from '../services/operate-spin-service.serv
 import { HttpClientService } from '../services/http-client.service';
 import { NzMessageService } from 'ng-zorro-antd';
 
+// add custom password validator
+import { CustomValidators } from '../utils/custom-validators';
+
 import {
     FormBuilder,
     FormControl,
@@ -82,9 +85,42 @@ export class PagesComponent implements OnInit {
 
         this.validateForm = this.fb.group({
             oldPassword: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]],
-            newPassword: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]],
+            // newPassword: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]],
-            confirmPassword: ['', [Validators.required, this.confirmationValidator, Validators.minLength(2), Validators.maxLength(15)]],
+            newPassword: [
-        });
+                null,
+                Validators.compose([
+                    Validators.required,
+                    // check whether the entered password has a number
+                    CustomValidators.patternValidator(/\d/, {
+                        hasNumber: true
+                    }),
+                    // check whether the entered password has upper case letter
+                    CustomValidators.patternValidator(/[A-Z]/, {
+                        hasCapitalCase: true
+                    }),
+                    // check whether the entered password has a lower case letter
+                    CustomValidators.patternValidator(/[a-z]/, {
+                        hasSmallCase: true
+                    }),
+                    // check whether the entered password has a special character
+                    CustomValidators.patternValidator(
+                        /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
+                        {
+                            hasSpecialCharacters: true
+                        }
+                    ),
+                    Validators.minLength(8),
+                    Validators.maxLength(15),
+                ])
+            ],
+            // confirmPassword: ['', [Validators.required, this.confirmationValidator, Validators.minLength(2), Validators.maxLength(15)]],
+            confirmPassword: [null, Validators.compose([Validators.required])],
+        },
+            {
+                // check whether our password and confirm password match
+                validator: CustomValidators.passwordMatchValidator
+            }
+        );
     }
 
     confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
@@ -112,12 +148,12 @@ export class PagesComponent implements OnInit {
     modifyHandleOk(): void {
         this.isConfirmLoading = true;
         let params = {
-            "curPassword":this.validateForm.get('oldPassword').value,
+            "curPassword": this.validateForm.get('oldPassword').value,
-            "newPassword":this.validateForm.get('newPassword').value
+            "newPassword": this.validateForm.get('newPassword').value
         }
         this.httpClient.put('/sysapi/setting/user/cur/password', params).subscribe((response) => {
             // console.log(response);
-            if(response.is_success){
+            if (response.is_success) {
                 this.message.success('修改密码成功！');
                 this.validateForm.patchValue({
                     oldPassword: '',
@@ -129,7 +165,7 @@ export class PagesComponent implements OnInit {
                     this.validateForm.controls[i].markAsUntouched();
                     this.validateForm.controls[i].updateValueAndValidity();
                 }
-            }else{
+            } else {
                 this.message.error(response.err_msg + '，修改失败！');
             }
             this.modalIsVisible = false;

src/app/utils/custom-validators.ts

@@ -0,0 +1,28 @@
+import { ValidationErrors, ValidatorFn, AbstractControl } from '@angular/forms';
+
+export class CustomValidators {
+  static patternValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: any } => {
+      if (!control.value) {
+        // if control is empty return no error
+        return null;
+      }
+
+      // test the value of the control against the regexp supplied
+      const valid = regex.test(control.value);
+
+      // if true, return no error (no error), else return error passed in the second parameter
+      return valid ? null : error;
+    };
+  }
+
+  static passwordMatchValidator(control: AbstractControl) {
+    const password: string = control.get('newPassword').value; // get password from our password form control
+    const confirmPassword: string = control.get('confirmPassword').value; // get password from our confirmPassword form control
+    // compare is the password math
+    if (password !== confirmPassword) {
+      // if they don't match, set an error in our confirmPassword form control
+      control.get('confirmPassword').setErrors({ NoPassswordMatch: true });
+    }
+  }
+}