Question

我想添加一个自定义验证以确认密码，并将密码值输入验证器。

表单控件

accDetailsSF: this.fb.group({
        nUname: ['', [Validators.required,unique_uname()]],
        nPassword: ['', [Validators.required, Validators.minLength(8)]],
        nCPassword: [{value: '', disabled: true}, [Validators.required, Validators.minLength(8), matchPassword(nPassword)]]
      }),

错误： matchPassword（nPassword）<-找不到名称'nPassword'

function matchPassword(nPassword: FormControl){
  return (control: AbstractControl): {[key: string]:any} | null => {
    const nCPasswordV = control.value;
    const nPasswordV = nPassword.value
    if (nCPasswordV != nPasswordV) {
      return {'pwdMismatch': true}
    } else {
      return null;
    }
  };
}

Answer 1

将自定义验证器添加到formGroup而不是formcontrol，以便您可以访问展位nPassword和nCPassword控件

尝试一下：

  accDetailsSF: FormGroup;
  constructor(private fb:FormBuilder){
    this.accDetailsSF= this.fb.group({
        nUname: ['', [Validators.required]],
        nPassword: ['', [Validators.required, Validators.minLength(8)]],
        nCPassword: [{value: '', disabled: false}, [Validators.required, Validators.minLength(8)]]
      }, { 
      validators: matchPassword.bind(this)
      });
   }
   }
  export function matchPassword(formGroup: FormGroup) {
    const password  = formGroup.get('nPassword').value;
    const  confirmPassword = formGroup.get('nCPassword').value;
    console.log(password === confirmPassword ? null : { passwordNotMatch: true 
  });
    return password === confirmPassword ? null : { pwdMismatch: true };
  }

Example

具有文本字段参数的自定义验证器

1 个答案: