اعتبار سنجی فرم به روش Template-Driven Forms در انگولار ۷

  • دوشنبه ۲۲ دی ۱۳۹۹
  • بازدید ۱۵۱ نفر

angular 7 template driven forms validation 7097 تصویر

اعتبار سنجی فرم به روش Template-Driven Forms در انگولار ۷

در این بخش با یک مثال ساده چگونگی اعتبار سنجی فرم های Template-Driven در انگولار ۷ را بررسی خواهیم کرد. در ادامه ما یک فرم ثبت نام ساده با فیلدهای رایج (مانند first name، last name، email، password و confirm password) ایجاد می کنیم که تمامی فیلدهای آن الزامی (required) هستند، به گونه ای که ایمیل وارد شده باید یک ایمیل معتبر باشد و پسوردهای وارد شده هم حداقل شش کاراکتر باشد. همچنین یک validator سفارشی به نام MustMatch برای بررسی مقدار فیلد های password و confirm password ایجاد خواهیم کرد.

توجه! ظاهر فرم ثبت نام با استفاده از CSS و Bootstrap 4 طراحی شده است.

قالب کامپوننت اصلی (App Component Template)

قالب کامپوننت اصلی شامل کدهای HTML مربوط به فرم ثبت نام است که توسط مرورگر نمایش داده می شود. در فیلدهای فرم از دستورالعمل [(ngModel)] برای بایند کردن پراپرتی های model تعریف شده در کامپوننت اصلی استفاده شده است. برای اعتبار سنجی مقادیر فیلدها از صفات required، minlength و email استفاده شده است که مقادیر آن ها توسط توابع موجود فریم ورک انگولار بررسی می شوند.

رویداد submit فرم با استفاده از دستورالعمل (ngSubmit) به هندلر onSubmit() موجود در کامپوننت app بایند شده است. پیام های مربوط به اعتبار سنجی هر بار که کاربر فرم را submit کند نمایش داده می شوند. این کار با پراپرتی f.submitted کنترل می شود.

Validator سفارشی Must Match

در این مثال ما یک validator سفارشی برای بررسی مقدار دو فیلد password و confirm password ایجاد کرده ایم. شما می توانید از این اعتبار سنج برای فیلد هایی مثل email و confirm email نیز استفاده کنید.

دستورالعمل سفارشی Must Match

دستورالعمل سفارشی [mustMatch] اعتبار سنج سفارشی MustMatch را wrap می کند بنابراین می توانیم آن را به فرم وصل کنیم. دستورالعمل سفارشی زمانی لازم است که از روش template-driven استفاده می کنیم. زیرا در این روش برخلاف روش reactive froms به FormGroup دسترسی مستقیم نداریم. Directive سفارشی اینترفیس Validator را پیاده‌سازی کرده و خود را با NG_VALIDATORS ثبت می کند تا انگولار آن را به عنوان یک دستورالعمل اعتبار سنج سفارشی بشناسد.

فایل App Module

در این فایل به جز موارد معمول، باید FormsModule را از ‘@angular/forms’ وارد کرده و به بخش imports اضافه کنیم. همچنین باید directive مربوط به validator سفارشی را از ‘./_helpers/must-match.directive’ وارد کرده و به بخش declarations اضافه کنیم.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است