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?

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Div containing scrollable content with overlaid child element

I am facing an issue with a scrollable div that contains a table, where I am trying to append a loader component as a child to cover the div when it's scrolled. However, the loader only covers the initial size of the div. Here is an example similar t ...

All authentication logic in Angular encapsulated within the service

I am considering moving all the business logic into the auth service and simply calling the method on the component side. Since none of my functions return anything, I wonder if it's okay or if they will hang. COMPONENT credentials: Credentials = ...

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

I am facing a problem that I am unable to resolve. The error in my HTML reads: Object is possibly 'null' and Property 'value' does not exist on type 'EventTarget'. HTML <select [(ngModel)]="selectedProvincia" (ch ...

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

In an effort to resolve the 404 error that occurs when refreshing a page on my Angular application, I made modifications to the web.config file within the website folder on IIS. The code snippet added is shown below: <rule name="AngularJS Routes&qu ...

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

I have a variable called "message" in my component that is of type "any" and contains a method named "actionnowrapper()". When I bind this method to a regular HTML button like so, everything works as expected. <button (click)="message.actionnowrapper( ...

Creating classes dynamically in Angular2 and Ionic2

Dealing with a dilemma here. I am attempting to dynamically create an instance of a class from its superclass. Essentially, I have an AbstractClass and multiple classes that inherit from it. Check out this functional example in the TypeScript playground : ...

I am interested in creating a checkbox filtering system using Angular

Below is the display from my project's output window view image description here In the image, you can see checkboxes on the left and cards on the right. I want that when a checkbox is checked, only the corresponding data should be shown while the r ...

Issue with optional generic in Typescript union not functioning as intended

I am facing a challenge with a type that requires an optional generic. In my case, if the generic G is provided, a new property of type G must be included. However, I encountered an issue while trying to implement this in a function: interface Message { ...

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

I have been using TypeScript for some time now and have always faced challenges with this particular issue. My goal is to create an Event system for our application, where I can ensure type safety when creating objects that group events related to a specif ...

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

Hey there! I could really use some help with the issue I'm facing: So, I have a React class component that extends React.Component and it has a method that allows me to set its state whenever I want. I understand that passing a prop to the component ...

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

I successfully created a replica of YelpCamp using Node and EJS, but now I am attempting to convert it into a Node-React project. Everything was going smoothly until I encountered an issue while trying to list a specific user in the SHOW route. In order to ...

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

In my code, I have a function named getDevices(). This function is responsible for fetching an array of devices. After getting this array, the code iterates through each device and calls another function called updateToServer(). The purpose of updateToServ ...

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

I am currently using Chart.js to create a multi-line chart. However, I am facing an issue where the first tick extends beyond the left side of the chart, causing the entire chart to shift over. I would like to find a solution where the first tick does not ...

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)

Upon executing my main.ts script using deno, I encounter the following error message: error: Failed to retrieve compiled source code from https://deno.land/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcccbdbff8f918a86918f"& ...

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

While it functions properly with the normal react-scripts start, an error is thrown when attempting to view individual components through storybook as mentioned in the title. Here is the code: index.tsx import React from 'react'; import ReactD ...

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

It's frustrating to keep trying different methods to achieve a simple task. I have a reactive form and all I want is to display an error if the password strength is not 100, indicating that it does not meet all the requirements. I can easily access t ...

Issue with accessing container client in Azure Storage JavaScript library

When working on my Angular project, I incorporated the @azure/storage-blob library. I successfully got the BlobServiceClient and proceeded to call the getContainerClient method, only to encounter this error: "Uncaught (in promise): TypeError: Failed ...

Understand and extract data from a JSON array using Typescript

Here is a JSON response I received from a remote server: { "string": [ { "id": 223, "name": "String", "sug": "string", "description": "string", "jId": 530, "pcs": [{ "id": 24723, "name": "String", ...

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

When using Visual Studio Code, I am able to debug and step through the TypeScript source code of Main.ts. This is possible as long as the JavaScript and map files are located in the same folder as the TypeScript source. This setup works well in this struc ...

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

Issue Description There is an issue with the current behavior where initializing a validation pipe for a request body does not reject invalid types as expected. Desired Outcome The expected behavior should be that when a user provides a value that does n ...