validator in angular showing deprecation error in angular

Question

Below is my validation utlity function

import { FormGroup } from '@angular/forms';

// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];
        const matchingControl = formGroup.controls[matchingControlName];

        if (matchingControl.errors && !matchingControl.errors.mustMatch) {
            // return if another validator has already found an error on the matchingControl
            return;
        }

        // set error on matchingControl if validation fails
        if (control.value !== matchingControl.value) {
            matchingControl.setErrors({ mustMatch: true });
        } else {
            matchingControl.setErrors(null);
        }
    }
}

This is component class

this.userForm = this.formBuilder.group({

      id: [0],  
      userName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]],
      password: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(30)]],
      confirmPassword: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(30)]],
     
      ..
     
      }, {
        validator: MustMatch('password', 'confirmPassword')  --After adding this i am gtting deprecated error
    });

The ablove code is working fine ..But now am getting this.formBuilder.group is deprecated..

Please let me any alternative soltion..

EDIT:

import { AbstractControl } from '@angular/forms';
import { Injectable } from '@angular/core';

@Injectable()
export class ValidationService {

    getValidatorErrorMessage(name: string, value?: any) {
        const config = {
            'required': 'Required',
            'email':'Invalid email address',            
            'invalidPassword': 'This regex can be used ',            
            'mustMatch': `Passwords must match`,
        };
        return config[name];
    }

    
    password(control: AbstractControl) {
        if (control.value.match(/^(?=[^\d_].*?\d)\w(\w|[!@#$%]){7,20}/)) {
            return null;
        } else {
            return { 'invalidPassword': true };
        }
    }
 //can i move mustmatch function here?
}

This is my Validation service..Is it possible to mustmact in validation service..

This maybe useful https://stackoverflow.com/q/65155217/10403902 — Deepak, Dec 25 '20 at 04:07

score 1 · Accepted Answer · answered Dec 25 '20 at 05:23

1

Your validator function needs to return ValidationErrors | null

export function MustMatch(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];
        const matchingControl = formGroup.controls[matchingControlName];

        if (matchingControl.errors && !matchingControl.errors.mustMatch) {
            // return if another validator has already found an error on the matchingControl
            return null;
        }

        // set error on matchingControl if validation fails
        if (control.value !== matchingControl.value) {
            matchingControl.setErrors({ mustMatch: true });
           return { mustMatch: true };
        } else {
            matchingControl.setErrors(null);
           return null;
        }
    }
}

answered Dec 25 '20 at 05:23

Owen Kelvin

14,054
10
41
74

@Thanks you very much...after ur answer small ...Is it possible to move Mustmatch function in validation service ? Please let me know.,, – Ajt Dec 25 '20 at 09:41
mustMatch(control: AbstractControl, matchingControl: AbstractControl) { // set error on matchingControl if validation fails if (control.value !== matchingControl.value) { matchingControl.setErrors({ mustMatch: true }); return { mustMatch: true }; } else { return null; } } – Ajt Dec 25 '20 at 09:55
1

Yes you can move it to a validation service, as long as its a function, it wont be a problem where it came from – Owen Kelvin Dec 25 '20 at 11:42

validator in angular showing deprecation error in angular

1 Answers1