Angular 14：输入6位正确员工编码后显示员工姓名的实现方法

1. 组件逻辑（component.ts） #

在组件中构建表单，监听员工编码输入变化，当输入长度达到6位时触发查询，并处理响应结果：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { EmployeeService } from './employee.service';

@Component({
  selector: 'app-employee-search',
  templateUrl: './employee-search.component.html'
})
export class EmployeeSearchComponent implements OnInit {
  employeeForm: FormGroup;
  employeeName: string | null = null;

  constructor(
    private fb: FormBuilder,
    private employeeService: EmployeeService
  ) {}

  ngOnInit(): void {
    // 初始化表单控件
    this.employeeForm = this.fb.group({
      employeeCode: ['']
    });

    // 监听员工编码输入变化
    this.employeeForm.get('employeeCode')?.valueChanges.subscribe(code => {
      // 仅当输入为6位时发起查询
      if (code?.length === 6) {
        this.searchEmployee(code);
      } else {
        // 输入长度不足6位时清空显示内容
        this.employeeName = null;
      }
    });
  }

  private searchEmployee(code: string): void {
    this.employeeService.getEmployeeByCode(code).subscribe({
      next: (response) => {
        // 编码正确时赋值员工姓名
        this.employeeName = response.EmployeeName;
      },
      error: () => {
        // 请求失败或编码无效时显示invalid
        this.employeeName = 'invalid';
      }
    });
  }
}

2. 模板页面（component.html） #

绑定表单控件，根据employeeName的值动态展示内容：

<form [formGroup]="employeeForm">
  <div>
    <label>员工编码：</label>
    <input type="text" formControlName="employeeCode" maxlength="6">
  </div>
  <div>
    <label>员工姓名：</label>
    <span>{{ employeeName || '' }}</span>
  </div>
</form>

3. 员工服务补充（EmployeeService） #

确保服务中实现了查询接口，示例如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// 定义员工数据结构
interface Employee {
  EmployeeCode: string;
  EmployeeName: string;
}

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  constructor(private http: HttpClient) {}

  getEmployeeByCode(code: string): Observable<Employee> {
    // 替换为实际的后端API地址
    return this.http.get<Employee>(`/api/employees/${code}`);
  }
}

核心逻辑说明 #

• 通过valueChanges监听输入框，精准控制查询触发时机（仅6位编码时发起请求）
• 订阅服务响应：成功则展示员工姓名，失败（含编码不存在、网络异常等）则显示invalid
• 模板通过插值表达式动态渲染结果，未查询时显示空字符串

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