Merge pull request #111 from ngneat/fix/resolve-anchor-on-demand

fix: 🐛 resolve anchor on demand
ngneat · Dec 3, 2023 · 7795a54 · 7795a54
2 parents a8e1b05 + 646db4f
commit 7795a54
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/projects/ngneat/error-tailor/src/lib/control-error.directive.ts b/projects/ngneat/error-tailor/src/lib/control-error.directive.ts
@@ -55,7 +55,6 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  @Input() controlErrorAnchor: ControlErrorAnchorDirective;
 
  private ref: ComponentRef<ControlErrorComponent>;
- private anchor: ViewContainerRef;
  private submit$: Observable<Event>;
  private reset$: Observable<Event>;
  private control: AbstractControl;
@@ -72,7 +71,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  @Optional() private controlErrorAnchorParent: ControlErrorAnchorDirective,
  @Optional() private form: FormActionDirective,
  @Optional() @Self() private ngControl: NgControl,
- @Optional() @Self() private controlContainer: ControlContainer
+ @Optional() @Self() private controlContainer: ControlContainer,
  ) {
  this.host = elementRef.nativeElement as HTMLElement;
  this.submit$ = this.form ? this.form.submit$ : EMPTY;
@@ -82,7 +81,6 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  ngOnInit() {
  this.mergedConfig = this.buildConfig();
 
- this.anchor = this.resolveAnchor();
  this.control = (this.controlContainer || this.ngControl).control;
  const hasAsyncValidator = !!this.control.asyncValidator;
 
@@ -130,13 +128,13 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  this.submit$.pipe(map(() => true)),
  this.reset$.pipe(
  map(() => false),
- tap(() => this.hideError())
- )
+ tap(() => this.hideError()),
+ ),
  );
 
  // when submitted, submitFirstThenUponChanges
  const changesOnSubmit$ = submit$.pipe(
- switchMap((submit) => (submit ? controlChanges$.pipe(startWith(true)) : NEVER))
+ switchMap((submit) => (submit ? controlChanges$.pipe(startWith(true)) : NEVER)),
  );
 
  // on reset, clear ComponentRef and customAnchorDestroyFn
@@ -159,7 +157,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  return;
  }
 
- this.ref ??= this.anchor.createComponent<ControlErrorComponent>(this.mergedConfig.controlErrorComponent);
+ this.ref ??= this.resolveAnchor().createComponent<ControlErrorComponent>(this.mergedConfig.controlErrorComponent);
  const instance = this.ref.instance;
 
  if (this.controlErrorsTpl) {
@@ -175,7 +173,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  if (!this.controlErrorAnchor && this.mergedConfig.controlErrorComponentAnchorFn) {
  this.customAnchorDestroyFn = this.mergedConfig.controlErrorComponentAnchorFn(
  this.host,
- (this.ref.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement
+ (this.ref.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement,
  );
  }
  }