Для маскировки кредитной карты я сталкиваюсь с некоторыми проблемами проверки в Angular 6

Question

Я создал специальную директиву для маскировки кредитной карты и столкнулся с проблемой с проверкой. Я указал максимальную и минимальную длину числа «16» для кредитной карты, он принимает только 16 цифр, но с этими 16 числами он также считает пробел после 4 цифр, так что всего он принимает 19 цифр, и я получаю ошибку например: введенное вами значение имеет длину 19 символов, но оно не может быть больше 16 символов.

import { Directive, HostListener } from '@angular/core';
@Directive({
  selector: '[appCreditCardDirective]'
})
export class CreditCardDirectiveDirective   {
  @HostListener('input', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;

    let trimmed = input.value.replace(/\s+/g, '');
    if(trimmed.length > 16) {
      trimmed = trimmed.substr(0, 16);
    }

    let numbers = [];
    for(let i = 0; i < trimmed.length; i += 4) {
      numbers.push(trimmed.substr(i, 4));
    }

    input.value = numbers.join(' ');
  }

}