Автоматически преобразуйте входной контент в приложении Angular.
Я только что нашел очень полезную библиотеку JavaScript с открытым исходным кодом, которая отформатирует ваш входной контент в любой формат, который вы хотите. Большинство наших приложений содержат формы, и это поможет вам улучшить их UX. Вместо создания настраиваемых каналов или директив, которые преобразуют ваш входной текстовый контент в желаемый формат, это упростит вам путь. Вот некоторые функции, представленные в этой библиотеке:
- Форматирование номера кредитной карты
- Форматирование номера телефона
- Форматирование даты и времени
- Форматирование чисел
- Пользовательский шаблон разделителя, префикса и блоков
Установка
Просто выполните следующую команду, чтобы установить cleave.js в приложение Angular.
npm install cleave.js --save
Нам также необходимо установить jQuery, чтобы он работал правильно.
npm install jquery --save
Настроить форму
После установки мы создадим форму с несколькими полями формы ввода. Здесь я использую приложение Angular 8 с Bootstrap. Ознакомьтесь с этой ссылкой о том, как настроить приложение Angular 8 с помощью Bootstrap.
Затем нам нужно создать profile.ts и обновить наши app.component.html и app.component.ts. Вы также можете проверить эту ссылку, чтобы получить полный код этих файлов.
Не забудьте добавить это поверх своего app.component.ts.
import "cleave.js/dist/addons/cleave-phone.us"; declare var Cleave: any;
В этой демонстрации я использую только формат мобильного телефона в США. Вы также можете изменить его в зависимости от страны, которую вы хотите, или сделать его динамическим и проверить этот путь node_modules/cleave.js/dist/addons/, чтобы импортировать файлы формата мобильного телефона страны.
Форматирование даты
Вот пример кода для форматирования даты в формате ГГГГ-ММ-ДД.
this.date1 = new Cleave('#date1', {
date: true,
delimiter: '-',
datePattern: ['Y', 'm', 'd']
});
В приведенном выше примере кода найдется элемент, в котором id равно date1, и установлены разделитель и шаблон в соответствии с datePattern. Вы также можете изменить способ поиска элемента с id на CSS class. Просто измените #date1 на .date1 или любой CSS-класс, созданный со ссылкой на входной тег.
Форматирование кредитной карты
Вот пример кода для изменения входного содержимого в формат кредитной карты.
this.creditcard = new Cleave('#creditcard', {
delimiter: ' ',
blocks: [4, 4, 4, 4],
});
Форматирование мобильного телефона
Вот пример кода для изменения входного содержимого в формат мобильного телефона США. Вы можете обратиться к этому пути node_modules/cleave.js/dist/addons/, чтобы узнать доступные коды стран.
this.phone = new Cleave('#phone', {
phone: true,
phoneRegionCode: 'US'
});
Форматирование времени
Вот пример кода для изменения входного содержимого на формат времени (чч: мм: сс).
this.time1 = new Cleave('#time1', {
time: true,
timePattern: ['h', 'm', 's']
});
Вы можете проверить множество других примеров, доступных по этой ссылке.
Заключение
В этой статье мы узнали, как преобразовать наш вводимый контент в несколько форматов, таких как дата, время, формат кредитной карты и мобильного телефона.
Если вы считаете, что эта статья была полезной, не забудьте поделиться ею с друзьями.
