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