The "void" type cannot be assigned to the "ValidationErrors" type

Question

The "void" type cannot be assigned to the "ValidationErrors" type

export class MustMatchDirective implements Validator {
    @Input('mustMatch') mustMatch: string[] = [];

    validate(formGroup: FormGroup): ValidationErrors {
        return ValidateMatching(this.mustMatch[0], this.mustMatch[1])(formGroup); <-issue detected here
    }
}

export function ValidateMatching(controlName: string, matchingControlName: string) { 
    return (formGroup: FormGroup) => { 
        const control = formGroup.controls[controlName]; 
        const matchingControl = formGroup.controls[matchingControlName]; 
        if (matchingControl.errors 
            && !matchingControl.errors.matchingValidator) { 
            return; 
        } 

        if (control.value !== matchingControl.value) { 
            matchingControl.setErrors({ matchingValidator: true }); 
        } else { 
            matchingControl.setErrors(null); 
        } 
    } 
}

Can you help me identify the issue in the code provided above?

angular typescript

Answer 1

Answer №1

The arrow function inside the MustMatch function is currently returning void, but it should return ValidationErrors | null as indicated by the error message. Make sure it returns the correct type.

export class MustMatchDirective implements Validator {
    @Input('mustMatch') mustMatch: string[] = [];

    validate(formGroup: FormGroup): ValidationErrors | null {
        return MustMatch(this.mustMatch[0], this.mustMatch[1])(formGroup); <-error here
    }
}

export function MustMatch(controlName: string, matchingControlName: string) { 
    return (formGroup: FormGroup): ValidationErrors | null => { 
        const control = formGroup.controls[controlName]; 
        const matchingControl = formGroup.controls[matchingControlName]; 
        if (matchingControl.errors 
            && !matchingControl.errors.confirmedValidator) { 
            return null; 
        } 

        let error: ValidationErrors | null;
        if (control.value !== matchingControl.value) {
            error = { confirmedValidator: true };
        } else {
            error = null; 
        }
        matchingControl.setErrors(error);
        return error;
    } 
}

Answer 2

The arrow function inside the MustMatch function is currently returning void, but it should return ValidationErrors | null as indicated by the error message. Make sure it returns the correct type.

export class MustMatchDirective implements Validator {
    @Input('mustMatch') mustMatch: string[] = [];

    validate(formGroup: FormGroup): ValidationErrors | null {
        return MustMatch(this.mustMatch[0], this.mustMatch[1])(formGroup); <-error here
    }
}

export function MustMatch(controlName: string, matchingControlName: string) { 
    return (formGroup: FormGroup): ValidationErrors | null => { 
        const control = formGroup.controls[controlName]; 
        const matchingControl = formGroup.controls[matchingControlName]; 
        if (matchingControl.errors 
            && !matchingControl.errors.confirmedValidator) { 
            return null; 
        } 

        let error: ValidationErrors | null;
        if (control.value !== matchingControl.value) {
            error = { confirmedValidator: true };
        } else {
            error = null; 
        }
        matchingControl.setErrors(error);
        return error;
    } 
}

The "void" type cannot be assigned to the "ValidationErrors" type

Answer №1

Similar questions

Div containing scrollable content with overlaid child element

All authentication logic in Angular encapsulated within the service

The potential object null may lead to an absence of the 'value' property in the type 'EventTarget'

Refreshing an Angular page with parameterized routes on IIS results in a blank page

Leveraging the power of Kendo UI for Angular, bind the click event of a kendoButton to a method associated with a variable within

Creating classes dynamically in Angular2 and Ionic2

I am interested in creating a checkbox filtering system using Angular

Issue with optional generic in Typescript union not functioning as intended

Utilizing Typescript's optional generic feature to automatically infer the type of the returned object and maintain autocomplete functionality

"Troubleshoot: Issue with React class component's setState not correctly updating

What is the best way to transfer user data from the backend to the frontend?

implement a solution in Ionic 4 Angular 6 that triggers a function only when all the observables in a loop have

What is the best way to prevent ticks from extending beyond the left side of the chart?

Something went wrong trying to retrieve the compiled source code of https://deno.land/[email protected]/path/mod.ts. It seems the system is unable to locate the specified path. (os error 3)

Issue: Invariant violation: Utilizing <Link> is restricted to within a <Router> (storybookjs)

The Angular Password Strength Extension will display an error message if the password strength is below 100

Issue with accessing container client in Azure Storage JavaScript library

Understand and extract data from a JSON array using Typescript

Guide on troubleshooting Node TypeScript in Visual Studio Code when the JavaScript source is stored in a separate directory

Having trouble getting the ValidatorPipe to function properly in my nest.js application