Member-only story
Currency input field in Ionic with Angular
Ionic natively doesn’t provide any graceful input component for capturing user input for currency or decimal data (with defined precision and separator).
With native <ion-input>, capturing user input in decimal format can get ugly, prone to validation errors, and of course not a great user experience.
<ion-input placeholder="$0.00" inputmode="decimal" [(ngModel)]="entry" name="amount"></ion-input>
As we see here, with no input restrictions & validations, an obvious difference in what we expected and what we got, that’s a hell of a creative user.
There are a couple of solution packages available, that help you get the desired result to some extent:
https://www.npmjs.com/package/ng2-currency-mask
https://www.npmjs.com/package/ionicng2-currency-mask
but nothing fits right, succinct & meets the expectation truly. It adds more complexity to a simple problem, and yet does not provide 100% satisfaction.
Angular does provide a currency pipe for a formatted display of amount, which is very useful but doesn’t help with capturing input.
