Trims text for an Angular form control as the text is input

trim-on-input.directive.ts

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

// Trims text for an Angular form control as the text is input, e.g. " foobar    " -> "foobar"

@Directive({
  selector: '[trimOnInput]',
  standalone: true,
})
export class TrimOnInputDirective {
  constructor(private readonly ngControl: NgControl) {}

  @HostListener('input')
  onInput(): void {
    const control = this.ngControl.control;
    if (!control) {
      return; // control does not exist
    }

    const value = control.value;
    if (typeof value !== 'string') {
      return; // value is not a string
    }

    const trimmedValue = value.trim();
    if (value === trimmedValue) {
      return; // value is already trimmed
    }

    control.setValue(trimmedValue);
  }
}

// Usage in Angular template:
// <input trimOnInput ...>