Иони c 4 angular 8 валидация с HostListener и директивой применяется ко всем формам управления

Question

Я пытаюсь освободить дополнительное место после каждого четвертого di git в определенном контроле форм, но он применяется ко всем формам управления

Вот мой код

ts

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

@Directive({
  selector: '[credit-card]'
})

export class CardPage implements OnInit {

@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(' ');

  }
} 

html

<ion-item>
    <ion-label position="floating">Name on card</ion-label>
    <ion-input type ="text" formControlName = "name"></ion-input>
  </ion-item>

  <br>
  <ion-item>
    <ion-label position="floating">Card number</ion-label>
    <ion-input type ="tel" formControlName = "cardnumber" credit-card></ion-input>
  </ion-item>

Я использовал директиву для formcontol под названием cardnumber, но она также применяется для formcontol name

Чего мне не хватает?

Заранее спасибо