How to Auto Insert Decimal Separator in ngx-mask 20.0.3

For ngx-mask 20.0.3 to automatically insert the comma decimal separator, you need to configure the leadZero property as true and ensure your mask pattern matches the version’s requirements. The key difference from version 7.0.0 is that 20.0.3 requires explicit configuration for automatic decimal placement, which can be achieved by using [leadZero]="true" in conjunction with the correct mask pattern and separator configuration.

Contents

• Understanding Behavior Changes Between Versions
• Correct Configuration for Auto-Decimal Insertion
• Alternative Solutions and Workarounds
• Troubleshooting Common Issues
• Migration Guide from Version 7.0.0 to 20.0.3

Understanding Behavior Changes Between Versions

ngx-mask underwent significant changes between version 7.0.0 and 20.0.3, particularly in how it handles decimal separators and automatic value formatting. In version 7.0.0, the separator.2 mask with decimalMarker="," would automatically place the comma after two digits from the right, converting “123” to “1,23”.

However, version 20.0.3 introduced stricter validation and different default behaviors for the leadZero property. The automatic decimal insertion behavior changed to be more explicit, requiring proper configuration to achieve the same result as in earlier versions.

The main behavioral changes include:

• leadZero property defaults changed from true to false
• Mask pattern validation became more strict
• Decimal placement logic was refined to prevent conflicts with thousand separators

Correct Configuration for Auto-Decimal Insertion

To achieve automatic comma insertion in ngx-mask 20.0.3, you need to configure the input with the correct combination of properties:

<input 
  type="text" 
  mask="separator.2" 
  thousandSeparator="." 
  decimalMarker="," 
  [leadZero]="true"
  prefix="" 
  formnovalidate 
  matInput 
  formControlName="amount" 
  required 
/>

The critical change here is setting [leadZero]="true" which enables the automatic decimal placement behavior. This property tells ngx-mask to automatically insert the decimal separator when the user enters numbers, converting “123” to “1,23” as expected.

If you’re still experiencing issues, consider these additional configurations:

<input 
  type="text" 
  mask="separator.2" 
  thousandSeparator="." 
  decimalMarker="," 
  [leadZero]="true"
  [showMaskTyped]="true"
  [dropSpecialCharacters]="false"
  prefix="" 
  formnovalidate 
  matInput 
  formControlName="amount" 
  required 
/>

The [showMaskTyped]="true" property helps users see the mask pattern as they type, while [dropSpecialCharacters]="false" ensures the decimal marker is preserved in the final value.

Alternative Solutions and Workarounds

If the above configuration doesn’t work, consider these alternative approaches:

Custom Mask Pattern

Instead of relying on the separator.2 mask, you can create a custom mask pattern that explicitly defines the decimal placement:

<input 
  type="text" 
  mask="*.**" 
  thousandSeparator="." 
  decimalMarker="," 
  [leadZero]="true"
  prefix="" 
  formnovalidate 
  matInput 
  formControlName="amount" 
  required 
/>

Using the Pattern Property

You can also use the pattern property to define a more specific mask:

<input 
  type="text" 
  [pattern]="'separator.2'"
  thousandSeparator="." 
  decimalMarker="," 
  [leadZero]="true"
  prefix="" 
  formnovalidate 
  matInput 
  formControlName="amount" 
  required 
/>

Component-Level Configuration

If you need this behavior across multiple inputs, consider configuring it at the component level:

import { NgxMaskModule } from 'ngx-mask';

@NgModule({
  imports: [
    NgxMaskModule.forRoot({
      leadZero: true,
      thousandSeparator: '.',
      decimalMarker: ',',
      // other global configurations
    })
  ]
})
export class AppModule { }

Troubleshooting Common Issues

Checking the Form Control Value

Ensure you’re accessing the correct value from your form control. The displayed value might be different from the actual form value:

// In your component
get amountValue() {
  return this.yourForm.get('amount')?.value;
}

Debugging the Mask Behavior

Add console logging to understand how the mask is processing the input:

<input 
  (input)="onInput($event)"
  (blur)="onBlur($event)"
  ...other properties
/>

onInput(event: any) {
  console.log('Input value:', event.target.value);
  console.log('Form control value:', this.yourForm.get('amount')?.value);
}

onBlur(event: any) {
  console.log('Blur value:', event.target.value);
  console.log('Form control value on blur:', this.yourForm.get('amount')?.value);
}

Verifying the Version

Double-check that you’re indeed using version 20.0.3:

npm list ngx-mask

Or in your package.json:

"dependencies": {
  "ngx-mask": "20.0.3"
}

Migration Guide from Version 7.0.0 to 20.0.3

When migrating from version 7.0.0 to 20.0.3, keep these key differences in mind:

Property Changes

• leadZero now defaults to false instead of true
• Some mask patterns have been deprecated or changed behavior
• Validation rules have become more strict

Recommended Migration Steps

1. Update ngx-mask to version 20.0.3
2. Add [leadZero]="true" to all separator masks that rely on automatic decimal placement
3. Test all masked inputs thoroughly, especially those with decimal separators
4. Update any custom logic that relies on the old behavior

Breaking Changes Checklist

• [ ] Add [leadZero]="true" to separator masks
• [ ] Update deprecated mask patterns
• [ ] Verify thousand separator and decimal marker combinations
• [ ] Test form control values after input
• [ ] Check for any custom validation logic that might be affected

Conclusion

To configure ngx-mask 20.0.3 for automatic comma decimal insertion, you need to explicitly set [leadZero]="true" in your input configuration, which was the default behavior in version 7.0.0 but changed in newer versions. The key configuration is:

<input 
  type="text" 
  mask="separator.2" 
  thousandSeparator="." 
  decimalMarker="," 
  [leadZero]="true"
  ...other properties
/>

If you continue to experience issues, consider using custom mask patterns or component-level configurations. Always test thoroughly after version upgrades, as ngx-mask’s behavior can change significantly between major versions. For complex requirements, you may need to implement additional validation or formatting logic in your component to ensure consistent behavior across different ngx-mask versions.

Sources

1. ngx-mask Official Documentation - Separator Masks
2. ngx-mask GitHub Repository - Version 20.0.3 Release Notes
3. ngx-mask Migration Guide - Breaking Changes
4. ngx-mask Stack Overflow - LeadZero Property Configuration
5. ngx-mask npm Package - Version History