Angular updating value with FormControl produces "value should be string" error

[Valdas3]

There is a FormControl with a default value which is integer. That FormControl is set on an input which contains an imask with some blocks. This works with no problem but if you try update a value using that FormControl or if you re-create it then IMask throws an error "value should be string". If IMask is a NumberMask then it fails with "unmaskedValue.replace is not a function" error. Should I use some other methods to update the value of a FormControl if the value is integer?

An example which reproduces the issue https://stackblitz.com/edit/angular-imask-uvvy53?file=app%2Fapp.component.ts

[uNmAnNeR]

@Valdas3 so you want to get typed nested mask inside Angular. hm....
There is maskRef prop available from directive. So I think you can wrap imaskdirective into your own component with ControlValueAccessor, update nested mask inside writeValue method, get nested value before onChange. But this is just my assumptions.

[odione]

I have same problem with mask 'number'. When I set value to formControl with number value, i got "value should be string". There is other problem: when mask number, value store in model is string, and must be number.

[uNmAnNeR]

@odione you have to use unmask="typed" prop for numbers, or convert to string manually

[uNmAnNeR]

About original issue.
There is already possible to work with nested models, but not described in guide.

Proposal to do it better way:

1. describe in a guide how to use inheritance with masks and add a complete example
2. add format and parse options to every mask and use them in typedValue get/set since there are already used in Date mask.

[odione]

unmask="typed"
wooow! Works for me! Thanks!!!!

But mask with blocks not working:

export function currencyMask(currencyPrefix = 'R$') {
  return {
    mask: '${currencyPrefix} number',  // enable number mask
    lazy: false,
    blocks: {
      number: {
        mask: Number,
        scale: 2,  // digits after point, 0 for integers
        signed: false,  // disallow negative
        thousandsSeparator: '.',  // any single char
        padFractionalZeros: true,  // if true, then pads zeros at end to the length of scale
        normalizeZeros: true,  // appends or removes zeros at ends
        radix: ',',  // fractional delimiter
        mapToRadix: ['.']  // symbols to process as radix
      }
    }
  }
}

value store in model continues is string and not a number.

[uNmAnNeR]

Hi!
Thought on this a little. Here is an example how to do this:

https://jsfiddle.net/uNmAjs/49ap8v25/

So you use unmask="typed" with this mask value in model should be number.
I will describe it in a guide in details later.

[dstj]

@uNmAnNeR

I'm having the same value should be string problem with a currency block in Angular when setting a number value to the input.

You seem to have found the solution in your JSFiddle https://jsfiddle.net/uNmAjs/49ap8v25/ but that example seems a bit out of date as I get "Uncaught ReferenceError: imask is not defined" errors in the console and the return this.maskedBlock('d').typedValue; line gives a linting error: Property 'typedValue' does not exist on type 'PatternBlock'

Could you update it and explain a bit more how to use it in Angular?

Thanks a lot!