docs: restore UniqueAlterEgoValidator (#44764)

Update the docregion for the directive class to differentiate them

PR Close #44764

aio/content/examples/form-validation/src/app/shared/alter-ego.directive.ts

@@ -10,19 +10,8 @@ import { HeroesService } from './heroes.service';
 import { Observable, of } from 'rxjs';
 
 // #docregion async-validator
-// #docregion async-validator-directive
-@Directive({
-  selector: '[appUniqueAlterEgo]',
-  providers: [
-    {
-      provide: NG_ASYNC_VALIDATORS,
-      useExisting: forwardRef(() => UniqueAlterEgoValidatorDirective),
-      multi: true
-    }
-  ]
-})
-// #enddocregion async-validator-directive
-export class UniqueAlterEgoValidatorDirective implements AsyncValidator {
+@Injectable({ providedIn: 'root' })
+export class UniqueAlterEgoValidator implements AsyncValidator {
   constructor(private heroesService: HeroesService) {}
 
   validate(
@@ -35,3 +24,28 @@ export class UniqueAlterEgoValidatorDirective implements AsyncValidator {
   }
 }
 // #enddocregion async-validator
+
+// #docregion async-validator-directive
+@Directive({
+  selector: '[appUniqueAlterEgo]',
+  providers: [
+    {
+      provide: NG_ASYNC_VALIDATORS,
+      useExisting: forwardRef(() => UniqueAlterEgoValidatorDirective),
+      multi: true
+    }
+  ]
+})
+export class UniqueAlterEgoValidatorDirective implements AsyncValidator {
+  constructor(private heroesService: HeroesService) {}
+
+  validate(
+    control: AbstractControl
+  ): Observable<ValidationErrors | null> {
+    return this.heroesService.isAlterEgoTaken(control.value).pipe(
+      map(isTaken => (isTaken ? { uniqueAlterEgo: true } : null)),
+      catchError(() => of(null))
+    );
+  }
+}
+// #enddocregion async-validator-directive