如何将表单组控件值传递给在同一表单组中使用的自定义验证器？

Question

我有一个自定义验证器来检查重新输入确认

import { AbstractControl } from '@angular/forms';

export function RetypeConfirm(confirmpassword: string) {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        if (control.value !== confirmpassword) {
             return { 'mismatch': true };
        }
        return null;
    };
}

我的打字稿文件

import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { RetypeConfirm } from 'app/validators/retype-confirm.validator';

passwordChangeForm: FormGroup;
constructor(private fb: FormBuilder){
     this.passwordChangeForm = this.fb.group({
         newPassword: ["", [Validators.required, Validators.pattern(RegEx.STRONG_PASSWORD)]],
         confirmpassword: ["", [Validators.required, RetypeConfirm(***I want to pass passwordChangeForm.controls['newPassword'].value  here****  )]]
     });
}

我需要传递this.passwordChangeForm.controls['newPassword'].value给 RetypeConfirm 自定义验证器

Answer 1

该函数获取密码字段并与确认密码进行比较

function RetypeConfirm(newpassword: string): ValidatorFn {
    return (control: FormControl) => {

        if (!control || !control.parent) {
            return null;
        }
        return control.parent.get(newpassword).value === control.value ? null : { mismatch: true };
    };
}

您可以直接从组中传递密码的值

this.signUpForm = this.fb.group({
    newpassword: ['', [Validators.required]],
    confirmPassword: ['', [
        Validators.required,
        RetypeConfirm('newpassword')
  ]]
});

和 html，

<form [formGroup]="signUpForm">
    <label>New Password</label>
    <input  formControlName="newpassword" />
    <br>
    <label> Confirm Password</label>
    <input name="confirmPassword"  formControlName="confirmPassword"/>

    <span *ngIf=" signUpForm.get('confirmPassword').errors?.mismatch">Password Confirmation must match password</span>

</form>

工作堆栈闪电战。