时间戳

首页 > 解决方案 > 角度中的验证器显示角度中的弃用错误

angular - 角度中的验证器显示角度中的弃用错误

问题描述

以下是我的验证实用程序功能

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

ablove 代码运行良好..但现在 this.formBuilder.group 已被弃用..

请让我有任何替代解决方案..

在此处输入图像描述

编辑：

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

这是我的验证服务..是否可以在验证服务中进行验证..

标签： angulartypescript

解决方案

您的验证器函数需要返回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;
        }
    }
}

推荐阅读