使用Angular实现输入框字符串首字母自动大写功能

最简洁且可复用的实现方式是创建一个自定义指令，监听输入框的输入事件，自动将首字母转换为大写。以下是完整步骤：

1. 创建自定义指令 #

使用Angular CLI生成指令：

ng generate directive uppercase-first

然后替换指令文件内容：

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

@Directive({
  selector: '[appUppercaseFirst]'
})
export class UppercaseFirstDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    // 初始化时处理输入框已有值
    this.transformValue();
  }

  @HostListener('input') onInput(): void {
    this.transformValue();
  }

  private transformValue(): void {
    const input = this.el.nativeElement as HTMLInputElement;
    let value = input.value.trim();

    if (!value) return;

    // 首字母大写，其余字符保持原格式
    const transformedValue = value.charAt(0).toUpperCase() + value.slice(1);

    // 仅当值发生变化时更新，避免循环触发事件
    if (input.value !== transformedValue) {
      input.value = transformedValue;
      // 手动触发input事件，确保表单控件同步值
      input.dispatchEvent(new Event('input'));
    }
  }
}

2. 在组件中使用指令 #

不管是模板驱动表单还是响应式表单，都可以直接在input标签上添加指令选择器：

模板驱动表单示例 #

<input type="text" appUppercaseFirst [(ngModel)]="userInput" placeholder="输入内容，首字母自动大写">

响应式表单示例 #

<form [formGroup]="userForm">
  <input type="text" appUppercaseFirst formControlName="fullName" placeholder="输入姓名，首字母自动大写">
</form>

3. 效果说明 #

• 输入任意小写首字母时，会自动转换为大写
• 初始化时如果输入框已有值，首字母也会被转为大写
• 支持用户中途删除首字母后重新输入，依然保持首字母大写逻辑
• 不会影响其余字符的大小写格式

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