如何在Angular Material组件中实现输入内容全部转为大写？

我来帮你搞定这个问题！当你在Angular Material的matInput中使用响应式表单（formControlName）时，混合ngModel的写法确实不会生效——因为Angular在响应式表单模式下会忽略ngModel绑定，这就是你之前尝试失败的核心原因。下面给你两种可靠的解决方案：

方案一：监听表单控件的valueChanges（组件内处理） #

如果只是单个控件需要转大写，可以直接在组件类中监听表单控件的valueChanges事件，将输入值转为大写后再设置回去，同时要避免无限循环：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  form: FormGroup;
  private destroy$ = new Subject<void>();

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      FirstName: ['']
    });

    // 监听FirstName控件的输入变化
    this.form.get('FirstName')?.valueChanges.pipe(
      debounceTime(0), // 避免触发不必要的循环
      distinctUntilChanged(), // 只有值真正变化时才处理
      takeUntil(this.destroy$) // 组件销毁时取消订阅，防止内存泄漏
    ).subscribe(value => {
      // 设置大写值，emitEvent: false阻止再次触发valueChanges
      this.form.get('FirstName')?.setValue(value.toUpperCase(), { emitEvent: false });
    });
  }

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

模板里只需要保留响应式表单的写法即可：

<mat-form-field *ngIf="globals.isAdding">
  <input matInput placeholder="Name" formControlName="FirstName">
</mat-form-field>

方案二：自定义指令（复用性强） #

如果多个输入框都需要转大写，自定义一个指令会更优雅，能在所有matInput中复用：

1. 创建UpperCaseDirective #

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appUpperCase]' // 自定义指令选择器
})
export class UpperCaseDirective {
  constructor(private ngControl: NgControl) {}

  @HostListener('input', ['$event']) onInput(event: InputEvent): void {
    const inputElement = event.target as HTMLInputElement;
    // 保存光标位置，避免设置值后光标跳到末尾
    const cursorStart = inputElement.selectionStart;
    const cursorEnd = inputElement.selectionEnd;

    // 将输入值转为大写并设置到表单控件
    const upperCaseValue = inputElement.value.toUpperCase();
    this.ngControl.control?.setValue(upperCaseValue, { emitEvent: false });

    // 恢复光标位置
    inputElement.setSelectionRange(cursorStart, cursorEnd);
  }
}

2. 在模块中声明指令 #

确保在你的组件所属的NgModule中声明这个指令：

import { NgModule } from '@angular/core';
import { UpperCaseDirective } from './upper-case.directive';

@NgModule({
  declarations: [UpperCaseDirective],
  exports: [UpperCaseDirective] // 如果要在其他模块使用，记得导出
})
export class YourModule {}

3. 在模板中使用指令 #

<mat-form-field *ngIf="globals.isAdding">
  <input matInput placeholder="Name" formControlName="FirstName" appUpperCase>
</mat-form-field>

这个指令不仅能在matInput中使用，普通的input标签也能兼容，非常灵活。

为什么你之前的写法无效？ #

当你同时使用formControlName和ngModel时，Angular会默认进入响应式表单模式，此时ngModel的绑定会被忽略——Angular官方也不推荐在响应式表单中混合使用ngModel，所以你的(ngModelChange)逻辑根本不会被触发。专注于响应式表单的API（比如setValue、valueChanges）才是正确的方向。

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