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

Question

我有一个自定义管道输入，每插入 4 个字符就添加一个空格。问题是，如果我插入例如“1234 5678”然后我去删除 4，焦点而不是留在那里插入一个新字符，它会移动到最后。

管道

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>

标签： typescriptionic-frameworkionic3pipeangular5