Wj-input -mask currency mask

Wj-input -mask currency mask

Posted by: raj.ankathi on 17 October 2017, 11:41 am EST

• 

  raj.ankathi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 October 2017, 11:41 am EST

  Hello Team,
  
  How to mask currency using wj-input -mask , Can you please provide an example.

  Raj

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 17 October 2017, 4:06 pm EST

  Hi Raj,

  Refer this fiddle:

  http://jsfiddle.net/iwannabebot/d6od37km/

  ~nilay

• 

  raj.ankathi

  • Post Options:
  • Link
    Copy

  Posted 18 October 2017, 3:20 am EST

  Hi Nilay,
  
  Sorry, but I have already tried the same from the documentation. My problem is when I try to bind it to a formControlName where I get the price info from the API. It doesn’t bind
  
  It simply shows “$ . "
  
  Here is my input element on the form
  
  <wj-input-mask type=“text” formControlName=“grantSharePrice” class=“form-control input-val” mask=”$99.99" [ngClass]=“OnSubmit()”>)
  
  Since the amount is variable. How to set the mask for the price?

  Raj

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 22 October 2017, 10:37 pm EST

  Hi,

  With this code, binding is possible:

  TS:

  form = new FormGroup({
      first: new FormControl('900000000000.000')
  });
  

  Template:

  <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <wj-input-mask
      formControlName="first" 
      #inputmask
      mask="$999,999,999,999.999">
  </wj-input-mask>
  </form>
  

  However, with variable lengths, masking becomes problem. This is because InputMask was not designed for variable length values.

  I would suggest you to use InputNumber with format set to currency.

  Example:

  TS:

  form = new FormGroup({
      first: new FormControl(900000)
  });
  

  Template:

  <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <wj-input-number
          formControlName="first" 
          format="C">
      </wj-input-number>
  </form>
  

  I hope this resolves your issue.

  ~nilay