路由到其他组件时，如何避免自动聚焦指令触发表单错误提示？

问题根源 #

当前表单错误提示仅通过hasError('required')判断是否显示，而默认状态下空的必填控件本身就是invalid的。路由跳转时，登录组件尚未完全销毁，自动聚焦指令的ngAfterViewInit可能仍会执行聚焦操作，导致错误提示短暂出现（因为没有限制仅在用户交互后显示错误）。

解决方案 #

方案1：优化表单错误提示的显示逻辑（推荐） #

修改模板中的错误提示条件，仅在控件无效且已被用户触碰/修改时显示错误，这是Angular表单的最佳实践：

<!-- 邮箱错误提示 -->
<div *ngIf="formSignIn.controls['signInEmail'].invalid && (formSignIn.controls['signInEmail'].touched || formSignIn.controls['signInEmail'].dirty)">
  {{ getErrorMessageEmail() }}
</div>

<!-- 密码错误提示 -->
<div *ngIf="formSignIn.controls['signInPassword'].invalid && (formSignIn.controls['signInPassword'].touched || formSignIn.controls['signInPassword'].dirty)">
  {{ getErrorMessagePassword() }}
</div>

这样只有当用户点击过输入框（touched）或修改过内容（dirty）后，错误提示才会触发，路由跳转时的短暂聚焦不会再导致错误闪现。

方案2：优化自动聚焦指令的执行时机 #

修改autofocus.directive.ts，确保聚焦操作仅执行一次，并避免在组件销毁阶段运行：

import { Directive, ElementRef, OnDestroy } from '@angular/core';

@Directive({
  selector: '[autofocusDirective]',
})
export class AutofocusDirective implements OnDestroy {
  private hasTriggered = false;

  constructor(private host: ElementRef) {}

  ngAfterViewInit() {
    if (!this.hasTriggered) {
      this.hasTriggered = true;
      // 用setTimeout确保DOM稳定后执行，避免路由切换时序问题
      setTimeout(() => {
        this.host.nativeElement.focus();
      }, 0);
    }
  }

  ngOnDestroy() {
    this.hasTriggered = false;
    // 组件销毁时移除焦点，避免残留状态
    this.host.nativeElement.blur();
  }
}

方案3：监听路由事件提前终止聚焦操作 #

通过监听路由跳转事件，在组件即将销毁时主动移除输入框焦点：

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Directive({
  selector: '[autofocusDirective]',
})
export class AutofocusDirective implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private host: ElementRef, private router: Router) {}

  ngOnInit() {
    this.router.events
      .pipe(takeUntil(this.destroy$))
      .subscribe(event => {
        if (event instanceof NavigationStart) {
          this.host.nativeElement.blur();
        }
      });
  }

  ngAfterViewInit() {
    this.host.nativeElement.focus();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

内容的提问来源于stack exchange，提问作者Rok Benko