Angular's strict mode causing issues with CustomValidator for email field in form

Trying to correctly define an email form field:

this.form.addControl('email', new FormControl('', [
    Validators.required, CustomFormValidators.isValidEmail
]));

Utilizing a CustomFormValidators class that includes an isValidEmail method

static isValidEmail(control: AbstractControl): ValidationErrors | null {

    if (!control) return; // <- ISSUE OCCURS HERE

        const regex = new RegExp(..email regex..);
        if (regex.test(control.value)) return null;

        return { isValidEmail: true };
    }

Encountering an error with Angular's new strict mode rules:

Type 'undefined' is not assignable to type 'ValidationErrors | null'.

Struggling to find a solution for this error.

Answer №1

As indicated by the signature, the expected return value must be either ValidationErrors or null.

When using the return statement, it implicitly returns undefined instead of null, causing the observed error.

Consider revising the code as follows:

if (!control) return null;

Alternatively, you can omit this line since the condition is unlikely to ever be true (a control instance is always passed as a parameter to a validator).

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

Developing a firestore query using typescript on a conditional basis

I've encountered an issue while attempting to create a Firestore query conditionally. It seems like there's a TypeScript error popping up, but I can't seem to figure out what's causing it. Here's the snippet of my code: const fetch ...

Refreshing Data in Angular Application without Maintaining Previous Success or Error State

I am currently developing an Angular application that requires editing and updating posts. Whenever a user leaves the edit post page and returns to it, I noticed that the data along with the success/error state are maintained. In order to ensure that users ...

Turn off the background graphic in chartjs

Greetings all! I'm currently facing an issue with removing the hashtag background of a line chart. Is there any method to disable or remove it? I am utilizing chartjs in my Ionic 2 app. Your assistance is greatly appreciated. Below is the code for my ...

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

Following the update to Angular 6, an error was encountered: CssSyntaxError:

Currently, I am in the process of upgrading my Angular 5 application to Angular 6. Following all the necessary steps outlined on update.angular.io, I have encountered a compilation error that persists even after completion of the upgrade process. The err ...

Tips on ensuring that the Angular frontend waits for the response from an Express REST call

Upon initializing my user Component, I want to trigger a REST-Call so that the user profile is displayed when the page loads. The process works smoothly as the component communicates with the service, which in turn contacts my express backend to make the n ...

I am unable to utilize NavLink unless it is within the confines of the <Router> component

I am currently developing a React application using react-router-dom. To enhance the user experience with smooth transitions, I integrated framer-motion for page animations. However, I encountered an issue where my navbar was being animated and recreated e ...

The 'SVGResize' or 'onresize' property is not available on the 'SVGProps<SVGSVGElement>' type

Using React with SVG I'm facing an issue with handling the resizing event of an svg element. I have looked into using the SVGResize and onresize events, but encountered compilation errors when trying to implement them: const msg1 = (e: any) => co ...

Having issues with Angular CLI functionality

Recently, I have been diving into learning Angular 4. To start off, I installed Node.js and executed the following commands in the Node.js command prompt: npm install -g typescript npm install -g @angular/<a href="/cdn-cgi/l/email-protection" class="__ ...

Angular 2+ - How to patiently combine multiple observables into a single observable

Trying to obtain both the public and private IP addresses from a user before sending a post request. The issue I'm facing is that I can't seem to wait until I have the necessary data before making the post request... Below are my two Observables ...

A data type that exclusively accepts values from an enumerated list without mandating the inclusion of every possible value within the enum

Here's a code snippet I'm working with: enum Foo { a, b, c } type Bar = { [key in keyof typeof Foo]: string; } const test: Bar = { a: 'a', b: 'b' }; I'm encountering an issue where the code is complaining ...

The 'src' properties in nextjs/image are of different types and therefore cannot be used interchangeably

I'm currently using React Dropzone to upload multiple images in my basic application. To display the types of images that are being dropped, I created a separate component with TypeScript. However, Next.js is throwing an error when it comes to the ima ...

Guide on troubleshooting *.ts files in an ionic 2 project using Chrome's inspect devices feature

After successfully creating my Ionic 2 application for Android using the command "ionic build android", everything seems to be working fine. I have been debugging the app by using Chrome inspect devices, but now I am facing an issue. I am trying to debug ...

Navigating through pages in your IONIC 3 application: A guide to routing

I have been working on an Ionic 3 project and currently using NavController for page navigation. For example: this.navCtrl.push(DetailsPage); However, I now need to switch to Angular routing. I came across a similar query regarding Ionic 2 in this link. ...

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

angular 6 personalized material icons with ligature assistance

Can I create my own custom material icons with ligature support? Currently, I use svgIcon to get Custom Icons, Is there a way to make custom icons that support ligatures? Here is my current code snippet: app.component.ts import { Component } from &ap ...

In response to resolving an HTTP header issue with a status of 200 ok during API testing with Postman, what steps can be taken

Hello everyone, I am new to the world of Angular and facing some issues while learning. Following a tutorial on YouTube, I tried to replicate the process with a few modifications. Initially, my get API worked fine when tested with Postman, and the post API ...

What could be causing MongoDB to not delete documents on a 30-second cycle?

Having trouble implementing TTL with Typegoose for MongoDB. I am trying to remove a document from the collection if it exceeds 30 seconds old. @ObjectType("TokenResetPasswordType") @InputType("TokenResetPasswordInput") @index( { cr ...

Tips for bypassing the 'server-only' restrictions when executing commands from the command line

I have a NextJS application with a specific library that I want to ensure is only imported on the server side and not on the client side. To achieve this, I use import 'server-only'. However, I also need to use this file for a local script. The i ...

Trying to filter an array of number|undefined in TypeScript to only include numbers is not identified as an array of numbers

Below is the code snippet: type TEntity = Array<{ size?: number }> const someVar: TEntity = //@ts-ignore getFromSomewhere() function isNumber(input: any): input is number { return !isNaN(Number(input)) } const sizes1: number[] = so ...