проверка маски ввода в FromGroup

Question

Я получил пример кредитной карты FormGroup, используя Angular directive, я создал input mask для ввода 4444444444444444 стал 4444 4444 4444 4444, но проблема в том, что я получил подтверждение регулярного выражения, которое не принимает space. это то, что я пробовал,

ts.file

  {
    this.creditCardForm = builder.group({
      creditCardNumber: ['', [creditCardNumberValidators]]
    });

  }   
}

function creditCardNumberValidators(c: FormControl) {
  const isVisa = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;

  return isVisa.test(c.value)
    ? null
    : {
        validateInput: {
          valid: false,
        },
      };
}



@Directive({
  selector: '[creditCardMask]',
})
export class CreditCardMaskDirective {
  @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);
    }

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

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

, и это моя демонстрация stackblitz , основываясь на моём обнаружении, я могуесть 2 решения:

• найти регулярное выражение, которое принимает пробел
• изменить creditCardNumber значение (удалить пробел), используя .replace(/\s/g, '') и .toString(), но проблема в том, что я не уверен, какчтобы изменить значение перед его заполнением в FormGroup для проверки

нужно предложение, и если есть лучшая практика для решения этой проблемы, спасибо