معرفی سریع Cleave.js:
Cleave.js یک کتابخانه است که برای قالب‌بندی ورودی استفاده می‌شود وقتی کاربر شروع به تایپ در یک فیلد می‌کند بدون اینکه کاربر مجبور باشد جداکننده «—» را همانطور که در گیف زیر نشان داده شده است تایپ کند.
در این مثال، فرمت تاریخ را با “/” به عنوان جداکننده و “dd/mm/yyyy” به عنوان الگوی تاریخ نشان خواهم داد.
{
date: true,
delimiter: "https://dev.to/",
datePattern: ['d', 'm', 'Y']
}
مراحل شروع استفاده از Cleave.js در برنامه زاویه ای:
1) Cleave.js را با استفاده از یک مدیریت بسته از ترمینال نصب کنید، در اینجا من از npm استفاده می کنم:
npm i cleave.js
2) در مرحله بعد، مسیر Cleave.js minimal bundle را به فایل angular.json اضافه کنید (همانطور که در تصویر زیر نشان داده شده است)
"./node_modules/cleave.js/dist/cleave.min.js"
3) اکنون با استفاده از قطعه زیر اعلام کنید که در زمان اجرا در کامپوننت شما شیئی به نام Cleave وجود خواهد داشت.
declare let Cleave: any;
4) من از ورودی فرم مواد زاویه‌ای استفاده خواهم کرد، اما می‌توانید از تگ‌های فرم معمولی استفاده کنید و Cleave.js به خوبی کار خواهد کرد. همانطور که نشان داده شده است، یک کلاس سفارشی را به فیلد ورودی فرم اضافه کنید (می توانید آن را هر چیزی نامگذاری کنید):
5) بعد، بیایید شی Cleave را در سازنده کامپوننت به این صورت پیاده سازی کنیم،
/*
Cleave takes in two parameters, the first is classname and second is the
object which contains data describing the input format desired.
In this example, we pass in input type, delimiter and datepattern.
*/
new Cleave('.cleave-date', {
date: true,
delimiter: "https://dev.to/",
datePattern: ['d', 'm', 'Y']
});
به کادر زرد رنگ توجه کنید، باید همان نام کلاسی باشد که در قسمت ورودی فایل HTML مربوطه اعمال شده است.
حالا بیایید با استفاده از دستور ng serve آن را سرو کنیم 🙂
ng serve -o
6) اوه اوه، آیا شما هم این خطا و صفحه خالی را دریافت کردید؟
معنی آن این است که ما سعی می کنیم به عنصری در DOM دسترسی پیدا کنیم که هنوز رندر نشده است. برای حل این مشکل، باید کد را در قلاب چرخه حیات ()ngOnInit پیاده سازی کنیم و نه سازنده را همانطور که در تصویر زیر نشان داده شده است.
7) و… Voila! حالا می توانید یک فیلد فرم و بدون خطایی را در کنسول ببینید و وقتی تاریخ را تایپ می کنید، می توانید Cleave.js را در عمل مشاهده کنید 🙂
من فقط نحوه استفاده از Cleave.js با فرمت تاریخ را نشان داده ام، فرمت های دیگر را از اینجا یاد بگیرید: https://bit.ly/3WGTNtj
کد نویسی مبارک!
