airport-chengdu-web/src/app/chpw/chpw.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'
import { CustomValidators } from '../utils/custom-validators';
import { NzMessageService } from 'ng-zorro-antd';
import { HttpClientService } from '../services/http-client.service';

@Component({
  selector: 'chpw',
  templateUrl: './chpw.component.html',
  styleUrls: ['./chpw.component.scss']
})
export class ChpwComponent implements OnInit {

  chpwForm: FormGroup;
  isConfirmLoading = false;

  constructor(
    private formBuilder: FormBuilder,
    private message: NzMessageService,
    private httpClient: HttpClientService) { }

  ngOnInit() {
    this.chpwForm = this.formBuilder.group({
      oldPassword: [null, [Validators.required, 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: [null, Validators.compose([Validators.required])],
    },
      {
        // check whether our password and confirm password match
        validator: CustomValidators.passwordMatchValidator
      }

    )
  }

  confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
    console.log(control.value);
    if (!control.value) {
      return { required: true };
    } else if (control.value !== this.chpwForm.controls.newPassword.value) {
      return { confirm: true, error: true };
    }
    return {};
  };

  updateConfirmValidator(): void {
    /** wait for refresh value */
    Promise.resolve().then(() => this.chpwForm.controls.confirmPassword.updateValueAndValidity());
  }

  modify(): void {
    this.isConfirmLoading = true;
    let params = {
      "curPassword": this.chpwForm.get('oldPassword').value,
      "newPassword": this.chpwForm.get('newPassword').value
    }
    this.httpClient.put('/sysapi/setting/user/cur/password', params).subscribe((response) => {
      // console.log(response);
      if (response.is_success) {
        this.message.success('修改密码成功！');
        this.chpwForm.patchValue({
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        })
        for (const i in this.chpwForm.controls) {
          this.chpwForm.controls[i].markAsPristine();
          this.chpwForm.controls[i].markAsUntouched();
          this.chpwForm.controls[i].updateValueAndValidity();
        }
      } else {
        this.message.error(response.err_msg + '，修改失败！');
      }
      this.isConfirmLoading = false;
    }, err => {
      // console.log(err);
      this.message.error('修改密码失败！');
      this.chpwForm.patchValue({
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      })
      for (const i in this.chpwForm.controls) {
        this.chpwForm.controls[i].markAsPristine();
        this.chpwForm.controls[i].markAsUntouched();
        this.chpwForm.controls[i].updateValueAndValidity();
      }
      this.isConfirmLoading = false;
    })

  }

}