Attempting to implement an asynchronous validator by utilizing the pipe and map functions

The concept is straightforward. A user inputs a string and I want to validate it. While I successfully implemented validation using SetTimeout and if/else logic, I am curious about how pipe/map can enhance this process.

Here is my current approach, but instead of only test2 being flagged as invalid, my name is always marked as invalid. There might be a mistake in my logic somewhere.

 asyncInvalidProjectName(control: FormControl): Promise<any> | Observable<any> {
    return of(control.value).pipe(
      map(value => value === 'test2' ? { 'invalidProjectName': true } : null),
      delay(500)
    );
  }

Answer №1

When it comes to form validation, async validators stand apart from regular validators. If you happen to be utilizing FormBuilder, the setup would look like this:

this.form = this.formBuilder.group({
    foo: ['initial value', null, this.asyncInvalidProjectName],
});

Alternatively, if you were using the FormControl constructor:

const control = new FormControl('initial value', {
   asyncValidators: this.asyncInvalidProjectName,
});

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

Is TypeScript necessary, or can I simply stick with ES6?

As a client developer using AngularJS in my daily job, we are considering transitioning to TypeScript. After researching TypeScript, I discovered that most JavaScript packages I require need definition type files. This can be inconvenient, especially whe ...

The type does not contain a property named 'x' - Error in Promise syntax - TS2339

I encountered a problem while working with Typescript that I couldn't quite figure out. Although I came across similar issues in other topics, I'm still struggling to find a solution for my particular issue. I can easily log userCredential.user.m ...

The component is no longer able to locate the imported element when it is being shared

Recently, I imported a component into the shared module in order to use it across 2 different modules. However, upon recompiling the app, an error message appeared stating that the jodit-editor, which is utilized by the shared component, is not recognized ...

Error: While working in an Angular project, a TypeError occurs because the property '****' cannot be read when used within a forEach loop

As I attempt to iterate over this.data.members and perform certain actions within the forEach loop on this.addedUsers, I encounter a TypeError: Cannot read property 'addedUsers' of undefined. Interestingly, I can access this.data.members outside ...

Angular2-material causing problem with scrolling in the md-content

I am attempting to create a layout where, md-toolbar remains fixed at all times Only md-content scrolls on the entire page if the content overflows. md-sidenav and its content should always remain fixed regardless of its mode ('over' or & ...

How can Angular2 detect when an entity is clicked within a window?

There are multiple items generated using *ngFor: <my-item *ngFor="let item of myArray" [p]="item"></my-item> I am able to handle a click event like this: <my-item ... (click)="doWork(item)"></my-item> However, I want to avoid a ...

Is it possible to showcase a unique date for every item that gets added to a list?

I am new to using React, so please bear with me. I want to be able to show the date and time of each item that I add to my list (showing when it was added). I am struggling to get this functionality working with my current code. Any help or explanation o ...

Select the text within the span element and paste it into the clipboard

Here is the html code I am working with: <label class="form-group" i18n>Send us your email:</label> <span (click)="select_email()" id="select_email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cb939282e5b9 ...

Is there a way to create identical copies of data with the identical names?

Here is the code I have written: this.temp1.push(this.json); for(let i=0; i<this.temp1.length; i++){ if(this.temp1[i].name == this.json.name){ this.orderList[i] = this.json; this.DBorder[i] = this.order_json; } ...

I'm interested in creating a unique form validator in Angular that verifies if a string has a combination of letters and numbers. How can this be

Currently, I am developing a registration form within Angular that mandates users to create a password comprising of both letters and numbers. I am in need of embedding a personalized validator to uphold this regulation. What would be the most practical ap ...

Encountering error message "Module not found '@angular/compiler-cli/ngcc'" while attempting to run "ng serve" for my application

Encountering an error while trying to run my app, I have attempted various solutions available online. These include uninstalling and reinstalling angular/cli, verifying the correct version in package.json (ensuring it is "@angular/cli" and not "@angular-c ...

Comparison between instanceof and constructor.name

Background information: Currently, our application retrieves images from a GET API Accept: 'application/octet-stream', responseType: 'blob' and we utilize the following method to display the image on the user interface. let imageUrl ...

Experiencing difficulties with my .css formatting following the installation of bootstrap in Angular

I've been immersing myself in Angular and encountered an issue that has me stumped. Despite using the latest version of Bootstrap in my Angular project, I'm facing challenges with my styles.css file that was defined prior to installing Bootstrap. ...

Error: React-router and typescript not playing well together!

During the development of my React app using TypeScript, I encountered a minor issue that I haven't been able to resolve yet. This is a snippet of my code: App.tsx import * as React from 'react'; import * as ReactDOM from 'react-dom ...

Angular 6 and D3 version 5.5 are causing an issue with the undefined `<variable>`

At the moment, I am attempting to create a Hierarchical Bar Chart in my Angular App using D3. When I click on a bar, I expect my function to recursively reshape the chart. The initial call works fine, but once I click on a bar, the variables become undefin ...

Tips for utilizing event handlers such as (onSelect) in place of (change)

Is it possible to use EventEmitter to trigger an event when one or more elements are selected in the UI? I want a solution where the event is triggered once we change the selection. Thank you. <select multiple (change)="setSelected($event.target)"> ...

Guide on expanding the capabilities of IterableIterator in TypeScript

I am currently working on extending the functionality of Iterable by adding a where method, similar to C#'s Enumerable.where(). While it is straightforward to extend the Array prototype, I am encountering difficulties in figuring out how to extend an ...

TypeScript implementation of internationalization message extraction in Create React App

I am facing challenges in getting i18n messages extracted, as defined by react-intl's defineMessages, to function correctly in a TypeScript-based CRA. Here are the methods I've attempted: Initial Approach I tried following this guide to make i ...

Error in Express.js and Angular 4: Unable to update headers after they have been sent

./models/user.js var mongoose = require('mongoose'); var validator = require('mongoose-unique-validator'); var Schema = mongoose.Schema; const schema = new Schema({ firstName:{ type: String, required: true }, lastName: {type: ...

Manipulate Angular tabs by utilizing dropdown selection

In my latest project, I have developed a tab component that allows users to add multiple tabs. Each tab contains specific information that is displayed when the tab header is clicked. So far, this functionality is working perfectly without any issues. Now ...