CODEWITHSUNDEEP
formsvalidationangularangular2-forms
Quentin maxime
Quentin maxime

Reputation: 11

Cross field validation - Angular2 RC6

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 ?

Upvotes: 1

Views: 636

Answers (3)

nambo
nambo

Reputation: 31

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

Upvotes: 3

Quentin maxime
Quentin maxime

Reputation: 11

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;
        }
    }
}

Upvotes: 0

Slicc
Slicc

Reputation: 3445

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')

Upvotes: 0

Related Questions