Fix(#601)

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 16.1.3(2023-06-08)
+
+### Fix
+
+-   Fix ([#601](https://github.com/JsDaddy/ngx-mask/issues/722))
+-   Fix ([#1042](https://github.com/JsDaddy/ngx-mask/issues/722))
+-   Fix ([#680](https://github.com/JsDaddy/ngx-mask/issues/722))
+
 # 16.1.2(2023-06-05)
 
 ### Fix

README.md

@@ -452,6 +452,18 @@ Masked value: 1.234
 Input value: 1234.56
 Masked value: 1,234
 ```
+```html
+<input type="text" mask="separator.2" [leadZero]="true" />
+```
+To add zeros to the model at the end 
+
+```text
+Input value: 12
+Masked value: 12.00
+
+Input value: 12.1
+Masked value: 12.10
+```
 
 ```html
 <input type="text" mask="separator.2" separatorLimit="1000" />

projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts

@@ -42,6 +42,8 @@ export class NgxMaskApplierService {
 
     public leadZeroDateTime: IConfig['leadZeroDateTime'] = this._config.leadZeroDateTime;
 
+    public leadZero: IConfig['leadZero'] = this._config.leadZero;
+
     private _shift: Set<number> = new Set();
 
     public maskExpression = '';
@@ -120,6 +122,7 @@ export class NgxMaskApplierService {
                 maskExpression = '000.000.000-00';
             }
         }
+
         if (maskExpression.startsWith('percent')) {
             if (
                 inputValue.match('[a-z]|[A-Z]') ||
@@ -179,6 +182,7 @@ export class NgxMaskApplierService {
                 !backspaced
                     ? inputValue.slice(0, inputValue.length - 1)
                     : inputValue;
+
             if (backspaced) {
                 // eslint-disable-next-line no-param-reassign
                 inputValue = this._compareOrIncludes(
@@ -229,12 +233,14 @@ export class NgxMaskApplierService {
                 new RegExp(thousandSeparatorCharEscaped, 'g'),
                 ''
             );
+
             result = this._formatWithSeparators(
                 strForSep,
                 this.thousandSeparator,
                 this.decimalMarker,
                 precision
             );
+
             const commaShift: number = result.indexOf(',') - inputValue.indexOf(',');
             const shiftStep: number = result.length - inputValue.length;
 

projects/ngx-mask-lib/src/lib/ngx-mask.config.ts

@@ -17,6 +17,7 @@ export interface IConfig {
     separatorLimit: string;
     allowNegativeNumbers: boolean;
     leadZeroDateTime: boolean;
+    leadZero: boolean;
     triggerOnMaskChange: boolean;
     maskFilled: EventEmitter<void>;
     patterns: {
@@ -53,6 +54,7 @@ export const initialConfig: IConfig = {
     // eslint-disable-next-line @typescript-eslint/quotes
     specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
     leadZeroDateTime: false,
+    leadZero: false,
     triggerOnMaskChange: false,
     maskFilled: new EventEmitter<void>(),
     patterns: {

projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts

@@ -78,6 +78,8 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
 
     @Input() public leadZeroDateTime: IConfig['leadZeroDateTime'] | null = null;
 
+    @Input() public leadZero: IConfig['leadZero'] | null = null;
+
     @Input() public triggerOnMaskChange: IConfig['triggerOnMaskChange'] | null = null;
 
     @Output() public maskFilled: IConfig['maskFilled'] = new EventEmitter<void>();
@@ -129,6 +131,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
             separatorLimit,
             allowNegativeNumbers,
             leadZeroDateTime,
+            leadZero,
             triggerOnMaskChange,
         } = changes;
         if (maskExpression) {
@@ -211,6 +214,9 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
         if (leadZeroDateTime) {
             this._maskService.leadZeroDateTime = leadZeroDateTime.currentValue;
         }
+        if (leadZero) {
+            this._maskService.leadZero = leadZero.currentValue;
+        }
         if (triggerOnMaskChange) {
             this._maskService.triggerOnMaskChange = triggerOnMaskChange.currentValue;
         }
@@ -580,22 +586,37 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
         if (typeof inputValue === 'number' || this._maskValue.startsWith('separator')) {
             // eslint-disable-next-line no-param-reassign
             inputValue = this._maskService.numberToString(inputValue);
+            const localeDecimalMarker = this._currentLocaleDecimalMarker();
             if (!Array.isArray(this._maskService.decimalMarker)) {
-                const localeDecimalMarker = this._currentLocaleDecimalMarker();
                 // eslint-disable-next-line no-param-reassign
                 inputValue =
                     this._maskService.decimalMarker !== localeDecimalMarker
                         ? inputValue.replace(localeDecimalMarker, this._maskService.decimalMarker)
                         : inputValue;
             }
+            if (
+                this._maskService.leadZero &&
+                inputValue &&
+                this.maskExpression &&
+                this.dropSpecialCharacters !== false
+            ) {
+                // eslint-disable-next-line no-param-reassign
+                inputValue = this._maskService._checkPrecision(
+                    this.maskExpression.toString(),
+                    inputValue as string
+                );
+                if (this._maskService.decimalMarker === ',') {
+                    // eslint-disable-next-line no-param-reassign
+                    inputValue = inputValue.toString().replace('.', ',');
+                }
+            }
             this._maskService.isNumberValue = true;
         }
 
         if (typeof inputValue !== 'string') {
             // eslint-disable-next-line no-param-reassign
             inputValue = '';
         }
-
         this._inputValue = inputValue;
         this._setMask();
 

projects/ngx-mask-lib/src/lib/ngx-mask.service.ts

@@ -251,7 +251,11 @@ export class NgxMaskService extends NgxMaskApplierService {
      * 1e-7 -> '0.0000001'
      */
     public numberToString(value: number | string): string {
-        if (!value && value !== 0) {
+        if (
+            (!value && value !== 0) ||
+            (this.maskExpression.startsWith('separator') &&
+                (this.leadZero || !this.dropSpecialCharacters))
+        ) {
             return String(value);
         }
         return Number(value).toLocaleString('fullwide', {
@@ -454,6 +458,12 @@ export class NgxMaskService extends NgxMaskApplierService {
         if (!this.isNumberValue || value === '') {
             return value;
         }
+        if (
+            this.maskExpression.startsWith('separator') &&
+            (this.leadZero || !this.dropSpecialCharacters)
+        ) {
+            return value;
+        }
         const num = Number(value);
         return Number.isNaN(num) ? value : num;
     }
@@ -503,7 +513,7 @@ export class NgxMaskService extends NgxMaskApplierService {
         return value.replace(this._regExpForRemove(markers), '.');
     }
 
-    private _checkSymbols(result: string): string | number | undefined | null {
+    public _checkSymbols(result: string): string | number | undefined | null {
         if (result === '') {
             return result;
         }
@@ -536,11 +546,17 @@ export class NgxMaskService extends NgxMaskApplierService {
         return matcher ? Number(matcher[1]) : null;
     }
 
-    private _checkPrecision(separatorExpression: string, separatorValue: string): number | string {
-        if (separatorExpression.indexOf('2') > 0) {
-            return Number(separatorValue).toFixed(2);
+    public _checkPrecision(separatorExpression: string, separatorValue: string): number | string {
+        const separatorPrecision = separatorExpression.slice(10, 11);
+        if (
+            separatorExpression.indexOf('2') > 0 ||
+            (this.leadZero && Number(separatorPrecision) > 1)
+        ) {
+            return this.leadZero
+                ? Number(separatorValue).toFixed(Number(separatorPrecision))
+                : Number(separatorValue).toFixed(2);
         }
-        return Number(separatorValue);
+        return this.numberToString(separatorValue);
     }
 
     public _repeatPatternSymbols(maskExp: string): string {