Angular 5 custom input pipe loses focus when deleting charcter

Question

I have an input in with a custom pipe that adds a space every 4 characters inserted. The issue is that if I insert for example "1234 5678" and I go and delete 4, the focus instead of staying there to insert a new character it moves to the end.

PIPE

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: 'formatBankAcc'
})

export class FormatBankAccPipe implements PipeTransform {
  transform(value: string) {
    if (value != null) {
      value = value.replace(/[^\dA-Z]/g, '')
      .replace(/(.{4})/g, '$1 ')
      .trim();
    }
    return value;
  }
}

HTML

<ion-input #editInput type="{{ !servicesPerBillingAccountViewModel.editable ? 'hidden' : 'text' }}" maxlength="29" [ngModel]="billingAccount.bankAccountNumber | formatBankAcc" 
    (ngModelChange)="billingAccount.bankAccountNumber=$event" 
    [class.input-border-bottom-grey]="billingAccount.showConfirmCancelIcons"
    [class.input-border-validation-error]="billingAccount.showLabelError"
    [placeholder]="servicesPerBillingAccountsCmsModel.literalBankPlaceholder" 
    (keyup)="checkBankAccLength(billingAccount)">
</ion-input>