角度：带有参数的自定义验证

Question

我正在尝试使用Reactive Form在Angular 6中实现验证密码验证，但是在使用“ 1234”的示例下面，我无法获得最佳方法，但是我想传递密码控制。 我尝试了ValidatePWD（this），但也无法正常工作。

CREATE FUNCTION [dbo].[GetStudentsList] (@groupId INT)
RETURN TABLE
RETURN
  SELECT [Id], [FirstName], [LastName]
  FROM [dbo].[Students];

Answer 1

  

选项1-通过password验证verifyPassword和FormGroup，

这里是用于确认密码验证的简单示例代码，您需要将验证器传递到FormGroup和password这两个控件。

confirmPassword

html

  this.form = this._fb.group({
              'user': ['', Validators.compose([Validators.required])],                       
              'password': ['', Validators.compose([Validators.required])],
              'verifypassword': ['', [Validators.required]],

  }, { validator: this.passwordMatchValidator });

  passwordMatchValidator(g: FormGroup) {
    return g.get('password').value === g.get('verifypassword').value
       ? null : {'mismatch': true};
  }

示例示例在这里-https://stackblitz.com/edit/confirm-password-q3ngps

  

选项2-使用功能来匹配密码。

password-validator.ts

<div *ngIf="form.invalid && form.errors['mismatch']">Password did not match</div>

组件ts

export class PasswordValidation {

    static MatchPassword(AC: AbstractControl) {
        let password = AC.get('password').value;
        if(AC.get('confirmPassword').touched || AC.get('confirmPassword').dirty) {
            let verifyPassword = AC.get('confirmPassword').value;

            if(password != verifyPassword) {
                AC.get('confirmPassword').setErrors( {MatchPassword: true} )
            } else {
                return null
            }
        }
    }
}

工作副本在这里-https://stackblitz.com/edit/material-password-confirm-pnnd4t