删除字符时Angular 5自定义输入管道失去焦点

Question

我有一个自定义管道输入，该管道每插入4个字符就会增加一个空格。问题是，如果我插入“ 1234 5678”，然后删除4，则焦点移到末尾而不是停留在该位置以插入新字符。

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>