Как автоматически вставлять десятичный разделитель в ngx-mask 20.0.3

Для автоматического вставления запятой в качестве десятичного разделителя в ngx-mask 20.0.3 необходимо настроить свойство leadZero как true и убедиться, что ваш шаблон маски соответствует требованиям версии. Ключевое отличие от версии 7.0.0 заключается в том, что 20.0.3 требует явной конфигурации для автоматического размещения десятичных знаков, что можно достичь с помощью [leadZero]="true" в сочетании с правильным шаблоном маски и конфигурацией разделителя.

Содержание

• Понимание изменений поведения между версиями
• Правильная конфигурация для автоматического размещения десятичной запятой
• Альтернативные решения и обходные пути
• Устранение распространенных проблем
• Руководство по миграции с версии 7.0.0 на 20.0.3

Понимание изменений поведения между версиями

Между версиями 7.0.0 и 20.0.3 в ngx-mask произошли значительные изменения, особенно в том, как библиотека обрабатывает десятичные разделители и автоматическое форматирование значений. В версии 7.0.0 маска separator.2 с параметром decimalMarker="," автоматически размещала запятую после двух цифр справа, преобразуя “123” в “1,23”.

Однако в версии 20.0.3 были введены более строгие правила проверки и изменены значения по умолчанию для свойства leadZero. Поведение автоматического размещения десятичных знаков изменилось и стало более явным, требуя правильной конфигурации для достижения того же результата, что и в более ранних версиях.

Основные изменения в поведении включают:

• Значения по умолчанию для свойства leadZero изменились с true на false
• Проверка шаблонов масок стала более строгой
• Логика размещения десятичных знаков была усовершенствована для предотвращения конфликтов с разделителями тысяч

Правильная конфигурация для автоматического размещения десятичной запятой

Для достижения автоматического вставления запятой в ngx-mask 20.0.3 необходимо настроить ввод с правильным сочетанием свойств:

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

Ключевое изменение здесь - установка [leadZero]="true", которая включает поведение автоматического размещения десятичных знаков. Это свойство указывает ngx-mask автоматически вставлять десятичный разделитель при вводе пользователем чисел, преобразуя “123” в “1,23” как и ожидалось.

Если вы все еще сталкиваетесь с проблемами, рассмотрите эти дополнительные конфигурации:

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

Свойство [showMaskTyped]="true" помогает пользователям видеть шаблон маски при вводе, а [dropSpecialCharacters]="false" гарантирует, что десятичный разделитель сохраняется в конечном значении.

Альтернативные решения и обходные пути

Если приведенная выше конфигурация не работает, рассмотрите эти альтернативные подходы:

Пользовательский шаблон маски

Вместо того чтобы полагаться на маску separator.2, вы можете создать пользовательский шаблон маски, который явно определяет размещение десятичных знаков:

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

Использование свойства Pattern

Вы также можете использовать свойство pattern для определения более конкретной маски:

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

Конфигурация на уровне компонента

Если вам нужно это поведение для нескольких полей ввода, рассмотрите возможность настройки на уровне компонента:

import { NgxMaskModule } from 'ngx-mask';

@NgModule({
  imports: [
    NgxMaskModule.forRoot({
      leadZero: true,
      thousandSeparator: '.',
      decimalMarker: ',',
      // другие глобальные конфигурации
    })
  ]
})
export class AppModule { }

Устранение распространенных проблем

Проверка значения элемента управления формой

Убедитесь, что вы получаете правильное значение из элемента управления формой. Отображаемое значение может отличаться от фактического значения формы:

// В вашем компоненте
get amountValue() {
  return this.yourForm.get('amount')?.value;
}

Отладка поведения маски

Добавьте вывод в консоль для понимания того, как маска обрабатывает ввод:

<input 
  (input)="onInput($event)"
  (blur)="onBlur($event)"
  ...другие свойства
/>

onInput(event: any) {
  console.log('Значение ввода:', event.target.value);
  console.log('Значение элемента управления формой:', this.yourForm.get('amount')?.value);
}

onBlur(event: any) {
  console.log('Значение при потере фокуса:', event.target.value);
  console.log('Значение элемента управления формой при потере фокуса:', this.yourForm.get('amount')?.value);
}

Проверка версии

Убедитесь, что вы действительно используете версию 20.0.3:

npm list ngx-mask

Или в вашем package.json:

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

Руководство по миграции с версии 7.0.0 на 20.0.3

При миграции с версии 7.0.0 на 20.0.3 учтите эти ключевые различия:

Изменения в свойствах

• leadZero теперь по умолчанию имеет значение false вместо true
• Некоторые шаблоны масок устарели или изменили свое поведение
• Правила проверки стали более строгими

Рекомендуемые шаги миграции

1. Обновите ngx-mask до версии 20.0.3
2. Добавьте [leadZero]="true" ко всем маскам разделителей, которые полагаются на автоматическое размещение десятичных знаков
3. Тщательно протестируйте все маскированные поля ввода, особенно те, что имеют десятичные разделители
4. Обновите любую пользовательскую логику, которая зависит от старого поведения

Контрольный список критических изменений

• [ ] Добавьте [leadZero]="true" к маскам разделителей
• [ ] Обновите устаревшие шаблоны масок
• [ ] Проверьте комбинации разделителей тысяч и десятичных знаков
• [ ] Протестируйте значения элементов управления формой после ввода
• [ ] Проверьте наличие пользовательской логики проверки, которая может быть затронута

Заключение

Для настройки ngx-mask 20.0.3 для автоматического вставления десятичной запятой необходимо явно установить [leadZero]="true" в конфигурации вашего поля ввода, что было поведением по умолчанию в версии 7.0.0, но изменилось в более новых версиях. Ключевая конфигурация:

<input 
  type="text" 
  mask="separator.2" 
  thousandSeparator="." 
  decimalMarker="," 
  [leadZero]="true"
  ...другие свойства
/>

Если вы продолжаете сталкиваться с проблемами, рассмотрите возможность использования пользовательских шаблонов масок или конфигураций на уровне компонента. Всегда тщательно тестируйте после обновления версий, так как поведение ngx-mask может значительно меняться между крупными версиями. Для сложных требований вам может потребоваться реализовать дополнительную проверку или логику форматирования в вашем компоненте для обеспечения согласованности поведения между разными версиями ngx-mask.

Источники

1. Официальная документация ngx-mask - Маски разделителей
2. Репозиторий ngx-mask на GitHub - Заметки о выпуске версии 20.0.3
3. Руководство по миграции ngx-mask - Критические изменения
4. Stack Overflow по ngx-mask - Конфигурация свойства LeadZero
5. Пакет ngx-mask на npm - История версий