Angular自定义掩码需求：输入自动转小写并限制字符类型

Alright, let's solve this problem. You’ve got a custom mask that blocks uppercase letters (which works for your needs), but you want any uppercase input—even when Caps Lock is on—to automatically convert to lowercase and update the actual form control value so it plays nicely with your validator. Here's exactly how to do it:

Step 1: Keep Your Custom Mask (With a Small Note) #

First, hold onto your existing custom pattern since it ensures only lowercase letters and numbers are allowed. The key tweak here is we’ll convert uppercase inputs to lowercase before they hit the mask, so they’ll pass validation instead of being blocked.

customPattern = { 'a': { pattern: new RegExp('[a-z0-9]') }};

Step 2: Add Input Handling to Convert to Lowercase #

You need to intercept user input, convert it to lowercase, and update the form control’s actual value (not just the display). There are two reliable ways to pull this off:

Option 1: Listen to the input Event in the Template

This is straightforward and reacts immediately as the user types:

In your template:

<input 
  type="text"
  formControlName="yourInputControl"
  [mask]="customPattern"
  (input)="convertToLowercase($event)"
>

In your component:

convertToLowercase(event: Event) {
  const input = event.target as HTMLInputElement;
  const lowercasedValue = input.value.toLowerCase();
  const control = this.yourFormGroup.get('yourInputControl');

  if (control && control.value !== lowercasedValue) {
    // Update the control's actual value (critical for validation)
    control.setValue(lowercasedValue, { emitEvent: false });
    // Sync the input display to match the control's value
    input.value = lowercasedValue;
  }
}

Option 2: Subscribe to valueChanges on the Control

If you prefer handling logic entirely in the component instead of the template:

ngOnInit() {
  const inputControl = this.yourFormGroup.get('yourInputControl');
  
  inputControl?.valueChanges.subscribe(currentValue => {
    const lowercasedValue = currentValue.toLowerCase();
    if (currentValue !== lowercasedValue) {
      // Use emitEvent: false to avoid infinite loops (prevents valueChanges from firing again)
      inputControl.setValue(lowercasedValue, { emitEvent: false });
    }
  });
}

Why This Works #

• The emitEvent: false flag stops the setValue from triggering another valueChanges event, which would cause an infinite loop.
• By updating the form control’s value directly, your validate(control: AbstractControl) method will receive the lowercase value—exactly what you need for proper validation downstream.
• The mask will still block invalid characters (like symbols), since we’re only converting uppercase to lowercase before the mask processes the input.

Quick Troubleshooting Note #

If you notice the mask still blocking inputs occasionally, double-check that your conversion runs before the mask’s logic. Both methods above handle this naturally: the input event fires as the user types, and valueChanges reacts to any value change (including mask updates).

内容的提问来源于stack exchange，提问作者Michal Navrátil