Typed NumberMask returns 0 when input is emptied

[olbra]

Hi!
I'm using angular-imask@6.0.5, and I see that using unmask="typed" on NumberMask returns 0 when target input is emptied. I understand this is desired behavior, however it can lead to 2 issues

• if the input is marked as required, with its internal value set to 0, the input is then considered "valid" even though it's visually empty.
• you can't differentiate whether the field has been emptied or actually set to 0 by the end user.

I would therefore suggest to either return '', null or undefined instead of 0:

get typedValue (): number | undefined {
    return this.unmaskedValue ? Number(this.unmaskedValue) : undefined;
}

I can work around this problem using [unmask]="true" and manually handling conversion between string and number, but I believe it could be nice to have this by default with typed unmasking.
What do you think?

[uNmAnNeR]

We also struggled with this. I see 2 possible solutions:

1. you might want to use "unmasked" instead of "typed" in such cases. And do your transform logic somewhere else
2. admit that Number('') = 0, optionally use default value 0
   Type is type, i thought about this a lot and still believe that typed numbers should be just numbers, not undefined, null, etc.

[dstj]

@olbra, @uNmAnNeR

I had the same issue. Form validation seems broken to the user if empty == 0. This is how I solved it (based on the solution to another issue I had in #236)

class NullableMaskedNumber extends IMask.MaskedNumber {
	// @ts-ignore
	get typedValue() {
		return this.unmaskedValue !== ''
			// @ts-ignore
			? super.typedValue
			: null;
	}
	set typedValue(num) {
		super.typedValue = num;
	}
}

...

mask = new NullableMaskedNumber({
		mask: Number,
		...
	});
}

Maybe it could be a new nullOnEmpty option in the MaskNumber configuration to allow returning null (to me, null makes much more sense than undefined).

[eggp]

@uNmAnNeR

Hello,

However, in the case of unmask = "typed", the value 0 is not returned to the input if it is empty :(
As a result, if we use a required validator, for example, it will never be invalid and confusing enough that it is in control but not in the input.

example:
https://stackblitz.com/edit/angular-8wm5my?file=src%2Fapp%2Fform-field-error-example.html

[rqton]

@olbra, @uNmAnNeR

I had the same issue. Form validation seems broken to the user if empty == 0. This is how I solved it (based on the solution to another issue I had in #236)

class NullableMaskedNumber extends IMask.MaskedNumber {
	// @ts-ignore
	get typedValue() {
		return this.unmaskedValue !== ''
			// @ts-ignore
			? super.typedValue
			: null;
	}
	set typedValue(num) {
		super.typedValue = num;
	}
}

...

mask = new NullableMaskedNumber({
		mask: Number,
		...
	});
}

Maybe it could be a new nullOnEmpty option in the MaskNumber configuration to allow returning null (to me, null makes much more sense than undefined).

Thanks for the workaround, appreciate it <3

[DywiTom]

How can i use NullableMaskedNumber without creating a object manually on each input?