Question

197

Cross field validation in Angular2

rated 0 times [ 198] [ 1] / answers: 1 / hits: 20547 / 8 Years ago, mon, february 15, 2016, 12:00:00

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-Zd]/))

        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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

koltonadolfow

Add To Favorites

Follow

Total Points: 71

Total Questions: 118

Total Answers: 102

Location: Vietnam

Member since Sun, Oct 18, 2020

4 Years ago

answered 8 Years ago zaynerogerb · Accepted Answer

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