Я нашел пакет, который решил мою проблему. Я использовал ng2-валюта-маска, чтобы установить желаемый формат валюты. Но все еще была проблема с кнопкой возврата или очистки на Android и iOS о том, как с этим справиться. По умолчанию всегда возвращает 229 keyCode

I might be too late for OP, but hoping my solution will help future visitors. I have also written a blog on medium to further detail the solution. Full source code can be found on github

Решение

Используя привязку данных angular, конвейер валюты и собственный ионный ввод, можно легко реализовать настраиваемое поле ввода валюты.

First, we will create a reusable input component:

number-input.component.html

<ion-item (click) = "openInput()">
    {{ formattedAmount }}
    <ion-input name = "dummyFacade" id = "dummyFacade" #dummyFacade type = "number" inputmode = "numeric"
        (keyup) = "handleKeyUp($event)" (ionInput) = "handleInput($event)"></ion-input>
</ion-item>

number-input.component.js

@Component({
  selector: 'app-number-input',
  templateUrl: './number-input.component.html',
  styleUrls: ['./number-input.component.scss'],
  providers: [CurrencyPipe]
})
export class NumberInputComponent implements OnInit {

  private static BACKSPACE_KEY = 'Backspace';
  private static BACKSPACE_INPUT_TYPE = 'deleteContentBackward';

  @ViewChild('dummyFacade', {static: false}) private dummyFacade: IonInput;

  @Input() precision: number;

  @Input() amount: string;

  @Output() amountEntered = new EventEmitter<number>();

  constructor(private currencyPipe: CurrencyPipe) { }

  ngOnInit() {
    if (this.amount && this.amount.trim() !== '') {
      this.amountEntered.emit(+this.amount);
    }
  }

  handleKeyUp(event: KeyboardEvent) {
    // this handles keyboard input for backspace
    if (event.key === NumberInputComponent.BACKSPACE_KEY) {
      this.delDigit();
    }
  }

  handleInput(event: CustomEvent) {
    this.clearInput();
    // check if digit
    if (event.detail.data && !isNaN(event.detail.data)) {
      this.addDigit(event.detail.data);
    } else if (event.detail.inputType === NumberInputComponent.BACKSPACE_INPUT_TYPE) {
      // this handles numpad input for delete/backspace
      this.delDigit();
    }
  }

  private addDigit(key: string) {
    this.amount = this.amount + key;
    this.amountEntered.emit(+this.amount);
  }

  private delDigit() {
    this.amount = this.amount.substring(0, this.amount.length - 1);
    this.amountEntered.emit(+this.amount);
  }

  private clearInput() {
    this.dummyFacade.value = CONSTANTS.EMPTY; // ensures work for mobile devices
    // ensures work for browser
    this.dummyFacade.getInputElement().then((native: HTMLInputElement) => {
      native.value = CONSTANTS.EMPTY;
    });
  }

  get formattedAmount(): string {
    return this.currencyPipe.transform(+this.amount / Math.pow(10, this.precision));
  }

  openInput() {
    this.dummyFacade.setFocus();
  }

}

• Компонент ожидает точность & начальная сумма со страницы вызывающего абонента и выводит введенные / измененные пользователем необработанные данные.
• Внутри компонента ion-item инкапсулирует строковое поле formattedAmount для отображения значений в денежном формате и ion-input для захвата вводимых пользователем данных.
• Обрабатывая оба события ionInput и keyup из ion-input, мы сначала выводим поле formattedAmount с помощью currency pipe и одновременно очищаем поле ввода соответственно при каждом нажатии клавиши пользователя. Конечно, игнорирование любого нечислового ввода с клавиатуры. Это создает иллюзию красиво отформатированного поля ввода валюты.
• Чтобы отображать текст и поле ввода как единое целое, активируйте фокус ion-input при щелчке ионного элемента.
• Использование EventEmitter для вывода необработанного пользовательского ввода на вызывающую родительскую страницу.
  
  

Then, we will use it across any page where user input for amount in currency format is required:

app.page.html

<ion-content>
  <app-number-input [precision] = "precision" [amount] = "''" (amountEntered) = "amountChanged($event)"></app-number-input> 
</ion-content>

app.page.ts

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  amount = 0;

  precision = 2;

  entry;
  constructor() {}

  amountChanged(event: number) {
    this.amount = event;
  }
}

• Передайте требуемую точность и начальную сумму.
• Прослушайте выходное событие, чтобы захватить необработанные данные для расчета.