0

Help please understand. I'm trying to write a custom validator for a reactive form.

component:

private form: FormGroup;

  ngOnInit() {
    const this_ = this;

    this.form = new FormGroup({
      'email':      new FormControl(null, [Validators.required, Validators.email]),
      'password':   new FormControl(null, [Validators.required, Validators.minLength(6)]),
      'password2':  new FormControl(null, [Validators.required, Validators.minLength(6), this_.comparePasswords]),
      'name':       new FormControl(null, [Validators.required]),
      'agree':      new FormControl(false, [Validators.requiredTrue])
    });
  }

  comparePasswords(c: FormControl) {
    console.log(c);

    const hashStr = Md5.hashStr(c.value.password);
    const hashStr2 = Md5.hashStr(c.value.password2);

    console.log(hashStr, hashStr2);

    return (hashStr === hashStr2) ? null : {
      comparePasswords: {
        valid: false
      }
    };
  }

All the imports that you need to connect. After loading the page, the browser console immediately displays the form object, in which the value object is null.

I can not make check in the function comparePasswords().

Console display follow:

ERROR TypeError: Cannot read property 'password' of null

LIVE EXAMPLE HERE

2
  • 1
    Instead of new formcontrol with a default password value of null, why don't you set the default value to an empty string ""? I bet that's the issue. Commented Dec 27, 2017 at 17:47
  • Sorry I answered without seeing @I.R.R. comment
    – Wallace
    Commented Dec 27, 2017 at 17:56

2 Answers 2

3

Change null to ""

this.form = new FormGroup({
  'email':      new FormControl("", [Validators.required, Validators.email]),
  'password':   new FormControl("", [Validators.required, Validators.minLength(6)]),
  'password2':  new FormControl("", [Validators.required, Validators.minLength(6), this_.comparePasswords]),
  'name':       new FormControl("", [Validators.required]),
  'agree':      new FormControl(false, [Validators.requiredTrue])
});
1
  • Did you run this code with OP's test link and verified it solves the problem?
    – smac89
    Commented Dec 27, 2017 at 17:56
1

Besides giving the initial value as null, you are setting your custom validator on the formcontrol, so what you actually get in your custom validator is just the formcontrol password2, not the entire formgroup.

I would therefore place the custom validator at formgroup level, or better yet, create a nested formgroup for the passwords and apply the validator for that. Why? Since if you apply the validator on the whole form, it will be fired whenever any changes happen to form. But in this sample, I apply it on the whole form as well as minified your code. Also the advantage to applying a custom validator on a formgroup level (nested or not) will take care of both checking the inputs. As your validator sits in your question it will only check if the password2 matches password whenever changes happens to the password2 field. So what happens if you modify the password field after modifying password2, an error is not showed, and form is considered valid.

So build form as such:

constructor(private fb: FormBuilder) { }

ngOnInit() {
  this.form = this.fb.group({
    password:   ['', [Validators.required, Validators.minLength(6)]],
    password2:  ['', [Validators.required, Validators.minLength(6)]],
  },{validator: this.comparePasswords});
}

Then your custom validator would look like this:

comparePasswords(c: FormGroup) {
  const hashStr = Md5.hashStr(c.controls.password.value);
  const hashStr2 = Md5.hashStr(c.controls.password2.value);
  return (hashStr === hashStr2) ? null : { notSame: true };
}

You could compare just c.controls.password.value and c.controls.password2.value but since you are using Md5, I just used those values here. Also notice that we are just sending an object with some custom error of your choosing, here notSame if the passwords do not match.

And to display the error message you can do:

<div *ngIf="form.hasError('notSame')">Passwords do not match!</div>

Your modified StackBlitz

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.