CODEWITHSUNDEEP
angularngneat
anscom ooi
anscom ooi

Reputation: 69

Angular currency Mask how to input from right to left

import { createMask, InputmaskOptions } from "@ngneat/input-mask";

export const createCurrencyMask = (prefix: string = 'MYR'): InputmaskOptions<string> => {
  const regex = new RegExp(`[${prefix},\\s]`, 'g');
  return createMask({
    alias: 'numeric',
    groupSeparator: ',',
    digits: 2,
    digitsOptional: false,
    prefix: `${ prefix } `,
    placeholder: '0',
    parser: (value: string) => Number(value.replace(regex, ''))
  });
};

Hello there, i would like to ask how to only allow user to input from right to left? as this is mainly for price

Upvotes: 1

Views: 119

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

You can try setting the numericInput property to true. This might give you the desired result.

import { Component, VERSION } from '@angular/core';
import { FormControl } from '@angular/forms';
import { createMask } from '@ngneat/input-mask';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  regex = new RegExp(`[${'$'},\\s]`, 'g');
  name = 'Angular ' + VERSION.major;
  mask = createMask<any>({
    alias: 'numeric',
    groupSeparator: ',',
    digits: 2,
    digitsOptional: false,
    prefix: `${'$'} `,
    numericInput: true,
    positionCaretOnClick: 'select',
    placeholder: '0',
    parser: (value: string) => Number(value.replace(this.regex, '')),
  });
}

Stackblitz Demo

Upvotes: 1

Related Questions