چگونه در انگولار، روی اولین اینپوتی که خطا داره فوکوس کنیم؟

چگونه در انگولار، روی اولین اینپوتی که خطا داره فوکوس کنیم؟


هنگام کار با ورودی های مورد نیاز توی یک فرم، گاهی اوقات ممکنه کاربر فراموش کنه که یک ورودی مورد نیاز فرم رو پُر کنه، و وقتی روی دکمه‌ی ثبت نهایی فرم کلیک میکنه، هیچ اتفاقی نمیوفته. این میتونه برای کاربر کمی گیج‌کننده باشه که برای ادامه، باید چیکار کنه!!به کمک فرم‌های انگولار، ما میتونیم به کاربر کمک کنیم تا وقتی فرم رو میخواد ثبت کنه، روی اولین اینپوتی که خطا داره فوکوس کنیم تا سریعتر بتونه به کارش ادامه بده.ما داریم از AngularReactiveForms برای ایجاد فرم و سرویس FormBuilder برای منطق فرممون استفاده می‌کنیم.برای اضافه کردن منطق فوکوس روی اولین اینپوتی که خطا داره، هنگامی که کاربر فرم رو میخواد سابمیت کنه، یک دایرکتیو ایزوله ( IsolatedDirective) می‌سازیم.اسم این دایرکتیو رو میذاریم (focusInvalidInput).وقتی این دایرکتیو رو بذاریم رو فرممون، منتظر میمونه تا کاربر فرم رو سابمیت کنه و وقتی رویداد (Event) سابمیت رخ داد، میفهمه که باید در صورت وجود خطا، روی اولین اینپوتی که خطا داره فوکوس کنه. ( چه باهوش! )برای اینکه تشخیص بده که کِی رویداد سابمیت رخ داده، می‌تونیم از [email protected] استفاده کنیم تا متد مد نظر خودمون (onFormSubmit) رو همون موقع اجرا کنیم.وقتی ما یه رویداد داریم، می‌تونیم چک کنیم ببینیم شامل یک ورودی نامعتبر هست یا نه.یک راه آسون واسه اینکار اینه که چک کنیم ببینیم آیا المنتی وجود داره که شامل سلکتور .ng-invalid باشه. ( تو فرم‌های انگولاری هر اینپوتی که خطا داشته باشه، انگولار بهش کلاس ng-invalidرو میده ).برای بررسی تمپلیت (Template) فرممون، می‌تونیم سرویس رو به دایرکتیومون تزریق (Inject) کنیم و با استفاده از اون به HTML فرم دسترسی داشته باشیم.به وسیله این کد (this.el.nativeElement.querySelector(‘.ng-invalid’))میتونیم اولین اینپوتی که کلاس ng-invalid رو داره پیدا کنیم ( اگه همشو میخواید باید از querySelectorAll استفاده کنید.) و روش فوکوس کنیم. بعد از اینکه این دایرکتیو رو ساختیم، حالا باید سلکتور اون رو به فرممون اضافه کنیم تا جوری که میخوایم، رفتار کنه. اگه میخواید این رفتار رو به صورت عمومی تو تمام فرم‌های اپلیکیشن انگولاریتون داشته باشید، می‌تونید سلکتور دایرکتیو رو از [focusInvalidInput] به form تغییر بدید.امیدوارم از این یادداشت خوشتون اومده باشه 🙂

منبع

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *