In my .ts file, I have an Angular validator set up like this:
this.detailsForm = formBuilder.group(
{
email: ['', Validators.compose([Validators.email])]
});
While this setup works fine, the email validator also applies the required validation. I actually want to allow a null value as well. Is there a way to achieve this?
The reason is simply that a null or empty value will not match the expected shape (regexp).
To see the current regular expression used with Validators.email, check out this link:
const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
console.log(EMAIL_REGEXP.test('')); // false
console.log(EMAIL_REGEXP.test(null)); // false
console.log(EMAIL_REGEXP.test('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f796b796d994989a">[email protected]</a>')); // true
If you want to achieve this functionality, you can either create a custom validator that accepts this Regexp or a null/empty value, or consider using an async validator like I would in this case. Check out more information on creating asynchronous validators here.
Recently, I've found myself stuck in a puzzling predicament. For the last couple of weeks, I've been trying to troubleshoot why the types are getting lost within my projects housed in a monorepo. Even though my backend exposes the necessary types ...
I keep receiving notifications for the second object but not the first. I am utilizing the Local Notifications plugin from ionic native, which you can find more information about here: https://ionicframework.com/docs/v2/native/local-notifications/. Any a ...
I've been attempting to create a bot that responds with an embedded message when mentioned, but I'm running into some issues. Whenever I run this code snippet, it throws an error in my terminal and doesn't seem to do anything: client.on(&apo ...
As I work on creating a generic parent class to handle multiple children, I have encountered a challenge. My goal is to define an abstract function in the parent class that will take in a child object and return that same class. Here's my initial atte ...
In my Angular application, I have two translations in xliff format. The first one is @@field-is-required, which includes a string interpolation, and the second one is @@lastname, a regular translation. <trans-unit id="field-is-required" dataty ...
Is there a way to add toggle buttons to the description section of an expansion panel without triggering the expansion panel when interacting with the buttons? I have included an example here. ...
In my current setup, I have a dropdown menu that allows users to select a single option. This selection automatically provides me with the filtering value as an observable. Here is how it works: public months: any=[]; @observable public selectedMonth: ...
I am trying to set the current date within a formGroup in a specific format, but I keep encountering an error with the code below: 'Unable to convert "13/07/2020" into a date' for pipe 'DatePipe' this.fb.group({ startdateActivi ...
Here is the input I am working with: interface Option{ name:string travelMode:string } const options:Option[] = [ { name:"john", travelMode:"bus" }, { name:"john", travelMode:"car" }, { name:"kevin", travelMode:"bus" ...
Here is an example: { id:1, name:john, role:[ {name:boss, type:xyz}, {name:waiter, type:abc} ] } I am looking to append an array of objects to the existing "role" field without losing any other data. The new data should be added as individual ob ...
I have been facing a challenge while setting up jest and @testing-library/jest-dom for my typescript/react/next.js website. Each time I try running the tests, an error occurs, and I am struggling to identify the root cause. This issue has been perplexing ...
I'm currently using MobX React with TypeScript Why am I getting an error with <MainNote/>? Do I just need to set default props? https://i.stack.imgur.com/5L5bq.png The error message states: Property 'profileStore' is missing in typ ...
I'm currently using a Devextreme library for my project. I am having trouble finding a way to clear all the textarea information in the component along with other inputs when clicking on the Save button. Despite trying various methods, I have not bee ...
I am trying to create a list of users with an expandable addresses table when each user is clicked. However, for some reason, the expanded table appears blank. Can anyone help me figure out what the issue might be? You can view the code here: Stackblitz ...
I attempted to utilize a custom-made HTML file with the templateUrl attribute in Angular2. Below is the content of my login.component.ts file: import {Component} from '@angular/core'; @Component({ selector: 'login' , template ...
Let's take a look at our firebase configuration file: import { getFirestore } from "firebase/firestore"; export const firebaseConfig = { apiKey: process.env.FIREBASE_API_KEY, authDomain: process.env.FIREBASE_AUTH_DOMAIN, projectId: pr ...
My current challenge involves downloading an image from a public URL, converting it into a multer file format, and then uploading it using an existing API. So far, I've experimented with axios using responseType: "blob" and responseType: "arraybuffer" ...
Attempting to initiate my angular project using ./mvnw is resulting in an error when the build runs ng build --configuration development. The error message thrown reads as follows: Generating browser application bundles (phase: setup)... [INFO] /home/use ...
Recently, I crafted a simple higher-order component that retrieves data from an API endpoint and handles loading, error messages, or displaying content upon success. Although the component functions correctly, it triggers the following error message: War ...
Dealing with different cases for type is my current challenge. In a React Functional Component, I have a callback function property that accepts an argument of either string or number. interface InputProps { getValue?: (value: string | number) => vo ...