Angular路由：按下Tab键能否触发路由调用？

嘿，当然可以通过Tab键触发你的Express路由调用啦！这在表单验证场景里很常见，我给你两种可行的方案，其中一种更贴合Angular的最佳实践，你可以根据自己的需求选择～

方案一：手动绑定Tab键盘事件触发验证 #

这种方式直接直观，适合快速实现简单场景：

1. 在组件模板的输入框上绑定keydown.tab事件：

<input type="text" (keydown.tab)="checkValueOnTab($event)">

2. 在组件类里实现对应的验证方法，调用你的Express路由：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  constructor(private http: HttpClient) {}

  checkValueOnTab(event: KeyboardEvent) {
    // 可选：如果想等验证完成再切换焦点，先阻止Tab的默认行为
    // event.preventDefault();

    const inputElement = event.target as HTMLInputElement;
    const inputValue = inputElement.value.trim();

    if (!inputValue) return; // 空值不用验证

    // 调用你的Express路由
    this.http.get(`/api/my_route?value=${inputValue}`)
      .subscribe({
        next: (res: any) => {
          if (res.exists) {
            // 这里可以给用户提示，比如弹出警告或者标记输入框为错误状态
            alert('这个值已经存在啦！');
          } else {
            console.log('值可用');
          }
          // 如果之前阻止了默认行为，验证完手动切换到下一个输入框
          // inputElement.nextElementSibling?.focus();
        },
        error: (err) => {
          console.error('验证请求出错了:', err);
        }
      });
  }
}

方案二：使用Angular响应式表单的异步验证器（推荐） #

这种方式是Angular官方推荐的表单验证方案，不需要手动处理键盘事件，会自动在输入框失焦（包括按Tab离开）时触发验证，还能自动管理表单状态：

1. 先在组件里定义响应式表单和异步验证器：

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators, AsyncValidatorFn, AbstractControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  myForm: FormGroup;

  constructor(private http: HttpClient) {
    // 初始化表单，给输入框添加同步验证和异步验证器
    this.myForm = new FormGroup({
      targetInput: new FormControl('',
        [Validators.required], // 同步验证：必填
        [this.valueExistsValidator()] // 异步验证：检查值是否存在
      )
    });
  }

  // 自定义异步验证器函数
  valueExistsValidator(): AsyncValidatorFn {
    return (control: AbstractControl) => {
      const inputValue = control.value.trim();
      if (!inputValue) return of(null); // 空值不验证，返回null表示验证通过

      // 调用Express路由验证
      return this.http.get(`/api/my_route?value=${inputValue}`)
        .pipe(
          map((response: any) => {
            // 如果值存在，返回错误对象；否则返回null
            return response.exists ? { valueAlreadyExists: true } : null;
          }),
          catchError(() => of(null)) // 请求出错时返回null，避免表单一直处于pending状态
        );
    };
  }
}

2. 在模板里使用表单并显示错误提示：

<form [formGroup]="myForm">
  <input type="text" formControlName="targetInput" placeholder="输入值">
  
  <!-- 当异步验证发现值存在时，显示提示 -->
  <div *ngIf="myForm.get('targetInput')?.hasError('valueAlreadyExists')" style="color: red;">
    这个值已经存在，请更换！
  </div>
  <!-- 显示表单验证状态（可选） -->
  <div *ngIf="myForm.get('targetInput')?.pending">验证中...</div>
</form>

这个方案的好处是完全集成了Angular的表单系统，你不用手动处理键盘事件、表单状态管理，而且代码更整洁易维护，适合长期项目使用。

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