Как динамически обрезать пробелы в material input?

Для динамического обрезания пробелов в Material input в Angular, можно использовать директиву или пользовательскую функцию.

Для начала, создайте новую директиву с помощью Angular CLI команды:

ng generate directive trimSpaces

Затем, откройте файл trim-spaces.directive.ts. В этом файле вы найдете заготовку директивы. Внутри класса директивы добавьте следующий код:

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

@Directive({
  selector: '[appTrimSpaces]',
})
export class TrimSpacesDirective {

  constructor(private el: ElementRef) { }

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

В этом коде мы определяем директиву с селектором "[appTrimSpaces]". Затем мы добавляем обработчик события "input" и метод "onFocusOut", который вызывается при изменении значения в input. Внутри этого метода мы сначала удаляем все пробелы в начале и конце строки с помощью метода trim(). Затем мы проверяем, были ли удалены пробелы, и если это так, то обновляем значение input на обрезанное значение.

Затем добавьте директиву на элемент input, в котором вы хотите обрезать пробелы:

<input type="text" appTrimSpaces>

Теперь при вводе значения в этот input, все пробелы в начале и конце строки будут обрезаны динамически.

Если вы предпочитаете не использовать директиву, вы также можете создать пользовательскую функцию, которая будет обрезать пробелы. В этом случае вам нужно будет добавить вызов этой функции в обработчик события "input" элемента input. Например:

<input type="text" (input)="trimSpaces($event)">

А в вашем компоненте добавьте следующий код:

trimSpaces(event) {
  const trimmedValue = event.target.value.trim();
  if (event.target.value !== trimmedValue) {
    event.target.value = trimmedValue;
  }
}

Этот код работает аналогично директиве, только функция trimSpaces вызывается на событие "input" и обрезает пробелы в значениях input.