Question

我正在尝试创建自定义验证以匹配密码和ConfirmPassword。

但是我得到了错误。

我是新手。请忽略我的无知。

创建自定义验证以匹配密码和确认密码是一个好主意吗？还是有更好的出路？

这是代码。请帮助

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl, ValidatorFn, ValidationErrors, FormBuilder } from '@angular/forms';


@Component({
  selector: 'app-sample-form',
  templateUrl: './sample-form.component.html',
  styleUrls: ['./sample-form.component.scss']
})
export class SampleFormComponent implements OnInit {
  formattedMessage: string;
  passMatch: Boolean;
  formValid: boolean;
  constructor() { }

  ngOnInit() {
    this.onChanges();
  }


  sample: FormGroup = new FormGroup({
    inpt: new FormControl(null, Validators.required),
    pass: new FormControl("", Validators.required),
    cpass: new FormControl("", [Validators.required, this.passwordMatch]),
    iagree: new FormControl(null, Validators.nullValidator)
  });

  onChanges(): void {
    this.sample.valueChanges.subscribe(val => {
      console.log("======================================");
      console.log("PASS  : " + this.sample.controls.pass.value);
      console.log("CPASS  : " + this.sample.controls.cpass.value);
      if (this.sample.controls.pass.value == this.sample.controls.cpass.value) {
        this.passMatch = true;
        console.log("MATCHED");
      } else {
        this.passMatch = false;
        console.log("MIS-MATCHED");
      }

      this.formValid = this.sample.valid;
      console.log("PASS MATCH : " + String(this.passMatch));
      console.log("FORM VALID : " + String(this.formValid));


    });
  }

  passwordMatch(group: FormGroup): ValidationErrors | null {
    let pass = group.controls.pass.value;
    let confirmPass = group.controls.cpass.value;

    return pass === confirmPass ? null : { notSame: true }
  }

  sumbit() {

  }

}

我遇到此错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'pass' of undefined
TypeError: Cannot read property 'pass' of undefined
    at passwordMatch (sample-form.component.ts:51)
    at forms.js:1480
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:1476)
    at FormControl.validator (forms.js:1418)
    at FormControl._runValidator (forms.js:4089)
    at FormControl.updateValueAndValidity (forms.js:4050)
    at new FormControl (forms.js:4656)
    at new SampleFormComponent (sample-form.component.ts:25)
    at createClass (core.js:31985)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

-阿什什

Answer 1

您需要绑定passwordMatch函数，因为angular会在不同的上下文中调用它

尝试

    cpass: new FormControl("", [Validators.required, this.passwordMatch.bind(this)]),

代替

    cpass: new FormControl("", [Validators.required, this.passwordMatch]),

更新后的答案：

您需要同时绑定passwordMatch方法和使用通用验证器在单独的表单组中添加pass和cpass 像这样的东西：

    sample = new FormGroup({
      inpt: new FormControl(null, Validators.required),
      iagree: new FormControl(null, Validators.nullValidator),

      confirmPasswordForm: new FormGroup({
        pass: new FormControl('', Validators.required),
        cpass: new FormControl('', Validators.required),
      }, {
        validator: this.passwordMatch.bind(this),
      })
    });

但是您需要在html中创建嵌套表单

Answer 2

您正在将验证器分配给formControl cpass，因此将通过参数获取的formControl仅是cpass。该验证器需要父级才能访问两个控件（通过和cpass）。尝试以下方法：

sample: FormGroup = new FormGroup({
  inpt: new FormControl(null, Validators.required),
  pass: new FormControl("", Validators.required),
  cpass: new FormControl("", [Validators.required]),
  iagree: new FormControl(null, Validators.nullValidator)
}, {validators: [this.passwordMatch]});

应该可以解决问题。该错误将出现在示例表单组中，而不是在formControl中，在我看来这是有意义的，因为它会影响多个表单控件。

Answer 3

这实际上解决了问题。使用关键字“ root”

passwordMatch(control: AbstractControl): ValidationErrors | null {
    const pass = control.root.get('pass');
    const cpass = control.root.get('cpass');

    if (pass != null && cpass != null) {
      console.log("Pass : ", pass.value);
      console.log("cpass : ", cpass.value);
      if (pass.value != cpass.value) {
        console.log("MISMATCH");
        return { PasswordMismatch: 'Password Mismatch' }
      } else {
        console.log("MATCH");
        return null;
      }
    } else {
      console.log("MISMATCH2");
      return { PasswordMismatch: 'Password Mismatch' };
    }
  }

无法读取未定义的属性“ *******”

3 个答案: