اعتبارسنجی فرم و POST Request در Angular
شناسه پست: 3951
بازدید: 60

در پست قبلی component های modal خود را ایجاد کردیم. اکنون زمان آن رسیده است تا از آنها در پروژه خود استفاده کنیم.

ایجاد یک موجودیت owner جدید و همچنین اعتبار سنجی فرم، هدف ما در این مقاله میباشد.

آماده سازی کامپوننت Owner

با ایجاد component خود در داخل پوشه owner، کار خود را شروع میکنیم. برای انجام این کار، دستور Angular CLI زیر را اجرا میکنیم:

سپس، ما می‌خواهیم ماژول مسیریابی owner را با افزودن یک route جدید، به این صورت اصلاح کنیم:

ما قصد داریم وقتیکه روی لینک “create” در داخل فایل owner-list.component.html کلیک می کنیم، برنامه ما را به صفحه creation هدایت کند.

بنابراین، اجازه دهید تگ <a> را در فایل owner-list.component.html به این صورت تغییر دهیم:

درباره اعتبارسنجی فرم و ReactiveFormsModule

اکنون می‌توانیم شروع به نوشتن کد برای ایجاد entity خود و اعتبارسنجی فرم کنیم. دو نوع اعتبار سنجی در Angular وجود دارد: اعتبار سنجی قالب محور و اعتبار سنجی فرم واکنشی. در پروژه خود، ما از اعتبارسنجی فرم واکنشی استفاده می کنیم زیرا خواندن یک فایل HTML راحت تر است. علاوه بر این، این نوع از اعتبارسنجی، فایل‌های HTML را با خطوط کدهای زیاد «کثیف» نکرده و تمام اعتبارسنجی در component قرار میگیرد که نگهداری را آسان‌تر میسازد.

درست قبل از اینکه component خود را اصلاح کنیم، باید فایل owner.module.ts را اصلاح کنیم. ReactiveFormsModule را اینجا import میکنیم زیرا این ماژولی است که از اعتبارسنجی فرم واکنشی پشتیبانی می کند:

علاوه بر این، باید یک interface جدید ایجاد کنیم:

قسمت اعتبارسنجی فرم در HTML

با اصلاح فایل create.component.html، به کار خود ادامه میدهیم:

حال این کد را توضیح میدهیم. در عنصر form، ما formGroup را با نام ownerForm ایجاد می کنیم. این form group شامل تمام کنترل هایی است که باید در فرم خود اعتبارسنجی کنیم. علاوه بر این، با (ngSubmit) زمانی که کاربر دکمه submit را کلیک میکند، تابعی را فراخوانی می‌کنیم. مقدار ownerForm را به عنوان پارامتری برای این تابع ارسال می‌کنیم که شامل تمام کنترل‌ها به همراه داده‌های مورد نیاز برای اعتبارسنجی میباشد.

یک ویژگی formControlName در داخل هر کنترل وجود دارد. این attribute، نشان دهنده نام کنترلی است که ما قصد داریم آن را در داخل ownerForm اعتبارسنجی کنیم و یک attribute اجباری میباشد. علاوه بر این، پیام های خطا در صورت وجود در تگهای <em> نمایش داده می شود.

یکی از مواردی که باید به آن توجه کرد عنصر ورودی DateOfBirth است. در اینجا ما از bsDatepicker directive از ngx-bootstrap برای پیوست کردن datepicker به کامپوننت input مورد نظر استفاده کرده ایم. برای اینکه این درست کار کند، باید ماژول BsDatepickerModule را داخل فایل owner.module.ts اضافه کنیم:

عملکردهای بسیار بیشتری با ngx-bootstrap’s date picker وجود دارد که میتوانیم از آنها استفاده کنیم، و برای آشنایی با آنها، می توانید این مستندات را بخوانید.

در مورد خطاها و دکمه های روی فرم

خطاها فقط در صورتی روی صفحه نمایش داده می‌شوند که توابع ()validateControl و ()hasError مقدار true را به عنوان نتیجه برگردانند.

تابع ()validateControl بررسی می‌کند که آیا کنترل نامعتبر است یا خیر و تابع ()hasError بررسی می‌کند که بر اساس کدام قانون اعتبارسنجی، خطا وجود دارد (required, max length…). هر دو تابع validateControl و hasError توابع سفارشی هستند که می خواهیم در فایل  component (.ts) پیاده سازی کنیم. همچنین یک دکمه submit نیز وجود دارد که تا زمانی که فرم معتبر نباشد غیرفعال خواهد بود و یک دکمه cancel که کاربر را از این فرم creation ریدایرکت می کند.

قسمت اعتبارسنجی فرم در Component (.ts)

اکنون، ما باید logic تمام توابع فراخوانی شده در فایل template را پیاده سازی کنیم. ما می‌خواهیم تعداد زیادی logic را به فایل owner-create.component.ts اضافه کنیم، بنابراین سعی می‌کنیم توضیحات را به چند قسمت تقسیم کنیم. کار خود را با import ها شروع میکنیم:

تعداد زیادی import اینجا وجود دارد، و ما در سراسر کد خواهیم دید که چرا از هر یک از آنها استفاده می کنیم.

حالا اجازه دهید قسمت دیگری از این فایل را بررسی کنیم:

اینجا به محض اینکه کامپوننت mounts می شود، متغیر FormGroup خود را با نام ownerForm با تمام FormControl ها initialize می کنیم. توجه داشته باشید که کلیدهای موجود در آبجکت ownerForm همان نام های موجود در ویژگی formControlName برای تمام فیلدهای input در فایل html هستند که از نوع اجباری میباشند. علاوه بر این، آنها دقیقا همنام ویژگی های داخل ابجکت owner (address, dateOfBirth و name) میباشند.

هنگامی که یک form control جدید را نمونه سازی می‌کنیم، value آن control را به عنوان پارامتر اول و آرایه Validators را به عنوان پارامتر دوم ارائه میدهیم، که این آرایه، تمام قوانین اعتبارسنجی را برای control های ما در خود نگه می‌دارد.

Handle کردن خطاها

اکنون، ما قصد داریم آن دو تابع را که در فایل template خود برای handle کردن خطاهای اعتبارسنجی فراخوانی کرده ایم را اینجا اضافه کنیم:

در متد ()validateControl، بررسی می‌کنیم که آیا کنترل فعلی نامعتبر است و touche شده است یا خیر (اگر کاربر اصلاً cursor را داخل کنترل قرار نداده باشد، نمی‌خواهیم خطایی نشان دهیم). علاوه بر این، تابع ()hasError بررسی می کند که کنترل فعلی کدام قانون اعتبار سنجی را نقض کرده است.

فرآیند ایجاد، DatePipe، و فراخوانی Modal

برای ادامه، تابع createOwner را که در رویداد (ngSubmit) فراخوانی کرده بودیم را اینجا اضافه می کنیم:

این تابع، form value را به عنوان ورودی گرفته و بررسی می‌کند که آیا form معتبر است یا خیر. که آگر form معتبر باشد، در نتیجه تابع private دیگری به نام executeOwnerCreation را فراخوانی می‌کند و این form value گرفته شده را به عنوان پارامتر به این تابع ارسال می‌کند.

طبق گفته مورد نظر، تابع private مورد نظر را ایجاد کنیم:

در اینجا ما یک آبجکت OwnerForCreation جدید ایجاد می کنیم که می خواهیم آن را با درخواست POST خود به API مورد نظر ارسال کنیم. توجه داشته باشید که در این مثال، استفاده از date pipe فقط به فایل های HTML محدود نمی شود. البته، برای اینکه این date pipe در یک فایل component کار کند، باید DatePipe را داخل فایل app.module.ts ایمپورت کنیم و آن را در آرایه “providers” قرار دهیم:

زمانیکه آبجکت ownerForCreation را ایجاد کردیم، سپس apiUrl را ساخته و تابع createOwner repository را فراخوانی میکنیم. اکنون، از آنجایی که ما از نوع OwnerForCreation داریم استفاده می کنیم، و نه از نوع Owner، پس باید این نوع را در داخل تابع repository تغییر دهیم:

بسیار خب. حالا به توضیحات logic خودمان برمیگردیم.

در داخل تابع subscribe – داخل ویژگی success response – next را از API میگیریم و آبجکت initial state را برای success modal خود ایجاد کرده و سپس با ارائه SuccessModalComponent و آبجکت config به عنوان پارامترها، modal را نشان می‌دهیم. علاوه بر این، ما اینجا از آبجکت bsModalRef برای subscribe به رویداد redirectOnOk که از SucessModalComponent پس از کلیک روی دکمه Ok ارسال می‌کنیم، استفاده می‌کنیم.

Redirection

با این subscription، تابع redirectToOwnerList را فراخوانی می کنیم. ما با کلیک بر روی دکمه Cancel در فرم خود، همین تابع را نیز فراخوانی می کنیم. بنابراین، این تابع را به این صورت اضافه میکنیم:

این کد، کدی آشنا برای navigate کردن به component قبلی میباشد. راه دیگری برای انجام این کار نیز وجود دارد که باید Location را از angular/common@ ایمپورت کرده و آن را در داخل سازنده inject کنید و سپس فقط کافیست که تابع ()back را در این ویژگی inject شده فراخوانی کنید (()location.back). اینکه کدام راه را انتخاب میکنید کاملاً به شما بستگی دارد.

اکنون فقط فایل root CSS خود (styles.css) را تغییر دهید تا پیام‌های <em> را با رنگ قرمز و سبک bold نشان دهیم و اگر ورودی‌ها نامعتبر باشند، آن‌ها را به رنگ قرمز wrap میکنیم:

بررسی نتایج

حال، اگر به کامپوننت CreateOwner برویم، هنگامی که داخل هر عنصر ورودی کلیک کنیم و آن را خالی رها کنیم، پیام های خطای خود را به این صورت می بینیم:

خطاهای Input در اعتبارسنجی فرم Angular

البته، می‌توانیم اعتبارسنجی از نوع max length را نیز آزمایش کنیم.

پس از پر کردن تمام فیلدها و کلیک بر روی دکمه ذخیره، پیام موفقیت آمیز را مشاهده خواهیم کرد:

Owner ایجاد شده successfully در اعتبارسنجی فرم Angular

وقتی روی دکمه OK کلیک کنیم، به صفحه owner-list هدایت می شویم و owner جدید در لیست قرار می گیرد.

نمایش کامپوننت Error Modal

در سرویس ErrorHandler، ما میخواهیم تابع handleOtherError را به این صورت اصلاح کنیم:

البته باید در همین فایل import ها را نیز اضافه کنیم:

حال اگر خطایی غیر از 500 یا 404 ظاهر شد، یک پیام modal را به کاربر نشان می دهیم. برای آزمایش این رفتار، می‌توانیم با تغییر عمل CreateOwner در پروژه Web API، خطا را به پروژه خود تحمیل کنیم:

نتیجه گیری

با خواندن این پست، موارد زیر را یاد گرفتید:

  • انواع مختلف اعتبارسنجی در Angular
  • نحوه استفاده از اعتبارسنجی فرم واکنشی در فایل HTML
  • نحوه استفاده از اعتبارسنجی فرم واکنشی در فایل component
  • روشی برای ایجاد یک entity جدید در سمت client

از اینکه این پست را خواندید از شما سپاسگزارم، امیدوارم برای شما مفید واقع قرار گرفته باشد.

در قسمت بعدی این آموزش گام به گام، با ارسال درخواست PUT به server، قسمت آپدیت پروژه را می نویسیم.

نویسنده

امید عباسی
من امید عباسی هستم. سالهاست که در زمینه برنامه نویسی با تکنولوژی دات نت فعالیت میکنم و عاشق این هستم که تجربیات و دانش خودم را در این زمینه با دیگران به اشتراک بزارم. خیلی دوست دارم که نظر و انتقاد خودتون رو در مورد این نوشته برای من بنویسید تا بتونم در آینده، مطالب بهتر و ارزشمندتری را برای شما فراهم کنم. در صورت داشتن هرگونه سوال هم در قسمت دیدگاه ها میتونید با بنده در ارتباط باشید