Cross field validation in Angular2

Question

I'm building an Angular2 client side application. I'm currently working on the membership components and integrating client side components with MVC6 vNext Identity v3. I have written custom Angular2 password validators as follows:

needsCapitalLetter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[A-Z]/))
        return {'needsCapitalLetter': true}

    return null;
}

needsLowerLetter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[a-z]/))
        return {'needsLowerLetter': true}

    return null;            
}

needsNumber(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/\d/))
        return {'needsNumber': true}

    return null;            
}

needsSpecialCharacter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[^a-zA-Z\d]/))
        return {'needsSpecialCharacter': true}

    return null;            
}

This work great, and I'm loving Angular2, but now I'm trying to write a validator that verifies that the "Confirm Password" is equal to the "Password". In order to do this, I need to be able to validate one field against the other. I can easily do this at the component level, and just check on blur, or on submit, or any number of other ways, but this bypasses the Angular2 ngForm validation system. I would very much like to figure out how to write an Angular2 Validator for a field that can check the value of another field, by passing in the name of the other field or something close to this. It seems this should be a capability as this would be a necessity in almost any complex business application UI.

Answer 1

You need to assign a custom validator to a complete form group to implement this. Something like this:

this.form = this.fb.group({
  name:  ['', Validators.required],
  email: ['', Validators.required]
  matchingPasswords: this.fb.group({
    password:        ['', Validators.required],
    confirmPassword: ['', Validators.required]
  }, {validator: this.matchValidator})  <--------
});

This way you will have access to all controls of the group and not only one... This can be accessed using the controls property of the FormGroup. The FormGroup is provided when validation is triggered. For example:

matchValidator(group: FormGroup) {
  var valid = false;

  for (name in group.controls) {
    var val = group.controls[name].value
    (...)
  }

  if (valid) {
    return null;
  }

  return {
    mismatch: true
  };
}

See this question for more details:

• Angular2 validator which relies on multiple form fields