如何从mat-input中删除空格

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <mat-form-field>
      <input matInput [formControl]="inputControl">
    </mat-form-field>
  `,
})
export class ExampleComponent {
  inputControl = new FormControl();

  constructor() {
    this.inputControl.valueChanges.subscribe(value => {
      // 在这里处理输入值，可以删除空格
      const trimmedValue = value.trim();
      console.log(trimmedValue);
    });
  }
}

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

@Directive({
  selector: '[appTrimWhitespace]'
})
export class TrimWhitespaceDirective {
  constructor(private el: ElementRef) {}

  @HostListener('input')
  onInput() {
    const value = this.el.nativeElement.value;
    const trimmedValue = value.trim();
    this.el.nativeElement.value = trimmedValue;
  }
}

import { NgModule } from '@angular/core';
import { TrimWhitespaceDirective } from './trim-whitespace.directive';

@NgModule({
  declarations: [
    TrimWhitespaceDirective
  ],
  exports: [
    TrimWhitespaceDirective
  ]
})
export class SharedModule { }

<mat-form-field>
  <input matInput appTrimWhitespace>
</mat-form-field>