Cross field validation - Angular2 RC6

Question

I don't succeed in creating a basic Cross field validation for my form with Angular 2 rc.6.

constructor(private fb: FormBuilder) {
    this.signUpForm = fb.group({
        "firstName": ["", Validators.required],
        "lastName": ["", Validators.required],
        "email": ["", [Validators.required, ValidationService.emailValidator]],
        "password": ["", [Validators.required, ValidationService.passwordValidator]],
        "passwordConfirm": ["", [Validators.required]]
    }, {validator: this.matchingPasswords('password', 'confirmPassword')});

    this.firstName = this.signUpForm.controls["firstName"];
    this.lastName = this.signUpForm.controls["lastName"];
    this.email = this.signUpForm.controls["email"];
    this.password = this.signUpForm.controls["password"];
    this.passwordConfirm = this.signUpForm.controls["passwordConfirm"];
}

 matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
    return (group: ControlGroup): {[key: string]: any} => {
        let password = group.controls[passwordKey];
        let confirmPassword = group.controls[confirmPasswordKey];

        if (password.value !== confirmPassword.value) {
            return {
                mismatchedPasswords: true
            };
        }
    }
}

I have seen the post Cross field validation in Angular2 but the point is that I am using Angular 2 rc.6.

With Angular 2 rc.6, ControlGroup is no more available from @angular/common and is not part of the updated @angular/forms where I get the FormBuilder, Validators, AbstractControl, FormGroup.

It results that my method matchingPasswords is not working anymore and I cannot check that the two passwords match.

Do you guys know what should I use instead of ControlGroup ?

It's now called `FormGroup` – Günter Zöchbauer Sep 06 '16 at 04:43 — Günter Zöchbauer, Sep 06 '16 at 04:43

score 3 · Answer 1 · answered Sep 30 '16 at 08:20

Going against what has been mentioned in the other comments, in my experience the "Validator" key was still needed to get form group validation to work (note this is in Angular2 Final).

This is the password match validator from the FormGroup docs on the Angular Website:

    this.passwordForm = fb.group({
        password: ["",[]],
        confirmPassword: ["",[]]
    }, this.passwordMatchValidator);

    passwordMatchValidator(g : FormGroup){
        return g.get('password').value === g.get('confirmPassword').value ? null : {'mismatch': true};
    }

However this didn't work until adding 'validator':

this.passwordForm = fb.group({
    password: ["",[]],
    confirmPassword: ["",[]]
}, {'validator': this.passwordMatchValidator})

ControlGroup is still replaced by FormGroup, as per API changes

score 0 · Answer 2 · answered Sep 06 '16 at 08:26

I've just had the same issue, as well as the FormGroup issue highlighted by @Günter Zöchbauer, you need to drop the { validator:,

so

, {validator: this.matchingPasswords('password', 'confirmPassword')}

needs to become

, this.matchingPasswords('password', 'confirmPassword')

score 0 · Answer 3 · answered Sep 06 '16 at 15:40

Thanks @Günter Zöchbauer @Slicc, I replaced the ControlGroup by formgroup and I drop the { validator:, and now the app is running.

However, it seems that the matchingPasswords doesn't affect the form validity. Do you have any ideas how to modify this method in view to update it ?

Also i think the method is never called :

matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
    return (group: FormGroup): {[key: string]: any} => {
        let password = group.controls[passwordKey];
        let confirmPassword = group.controls[confirmPasswordKey];

        console.log(password, confirmPassword);

        if (password.value !== confirmPassword.value) {
            return {
                mismatchedPasswords: true
            };
        }
        else {
            return null;
        }
    }
}

Cross field validation - Angular2 RC6

3 Answers3