iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular error NG01101 means an async validator returned the wrong kind of value. It must return a Promise or Observable that resolves or emits either a ValidationErrors object when the control is invalid or null when it is valid. A plain boolean, error object, or null returned directly does not satisfy that contract.
What NG01101 means
Angular expects an asynchronous validator to wrap its result in a Promise or Observable, even when the final answer is simple. The result inside that asynchronous wrapper represents validity: return an error map for failure and null for success. See Angular’s NG01101 error reference and AsyncValidator API.
For example, an Observable-based validator can emit of({ notTen: true, requiredValue: 10 }) when the value is invalid, or of(null) when it is valid. The key distinction is the outer return type: of(null) is an Observable, while returning null directly is not.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteHow to find the incorrect return
- Check where the validator is registered. For a reactive
FormControl, synchronous validators belong in the second constructor argument and async validators in the third. Angular runs async validators only after synchronous validators pass, as described in its form validation guide. - Inspect every return path. Confirm that every branch returns a Promise or Observable. A branch that returns an error map, boolean, or
nulldirectly can trigger NG01101 even if other branches return the right type. A TypeScript annotation does not convert a synchronous runtime value into an asynchronous one. - For an Observable, confirm it completes. Angular waits for the Observable to complete before finalizing validation. A stream that never completes can leave the control in the
pendingstate. Angular’s guide lists operators such asfirst,last,take, andtakeUntilas ways to make a stream finite.
Correct the validator’s result contract
Map the result of the asynchronous check to either an error map or null, then return the resulting Promise or Observable. For example, an Observable-based validator can follow this pattern:
#1 Best Overall
const validator: AsyncValidatorFn = (control) =>
service.check(control.value).pipe(
map((isInvalid) => isInvalid ? { unavailable: true } : null),
take(1),
catchError(() => of(null)), // Choose this policy deliberately.
);This is an illustrative pattern, not application-specific tested code. Adapt the service call and error key to your form. The take(1) operator makes the result finite when the service emits a value; use an appropriate completion strategy for the Observable your service actually returns.
Choose what a request failure means
An HTTP or service error is not automatically the same as a validation failure. Angular’s guide demonstrates catching an error and returning of(null), which treats the failed request as successful validation. That is a fail-open choice, not a universal rule.
If the application must not accept a value when it cannot verify it, return an error map instead. Choose deliberately based on the consequence of accepting an unchecked value, and ensure the error-handling branch still returns an Observable or Promise.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Async validator versus sync validator
Use a synchronous validator when the check can be decided immediately from the control’s current value. Use an async validator when validation depends on asynchronous work, such as a service response. In reactive forms, the registration position differs: synchronous validators are the second FormControl argument, and async validators are the third. Async validation runs only after synchronous validation succeeds.
Rank #3
Observable versus Promise
Both are valid async-validator return types. An Observable must complete for Angular to finish applying its result; a Promise resolves with the error map or null. Angular’s documentation does not identify one as a universal performance or style winner, so choose the form that fits the asynchronous operation and your application’s existing code.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
