فرم ها (Forms) در انگولار ۷ – آموزش انگولار ۷

  • چهارشنبه ۳۰ مرداد ۱۳۹۸
  • بازدید ۹۹ نفر

angular7 forms 6630 تصویر

فرم ها (Forms) در انگولار ۷

در این بخش از آموزش انگولار ۷، نحوه استفاده از فرم ها (Forms) در انگولار ۷ را بررسی خواهیم کرد. در انگولار ۷ به دو روش Template driven و Model driven می توان از فرم ها استفاده کرد.

روش Template Driven

در این روش بیشتر کارها در قالب و با استفاده از کدهای HTML انجام می شود و اما در روش model driven اکثر کارها در داخل کلاس کامپوننت انجام می شود. برای درک بهتر روش template-driven ، با استفاده از این روش یک فرم ساده لاگین با ورودی های email و password به همراه یک دکمه submit ایجاد می کنیم. قبل از شروع باید ماژول FormsModule را از angular/forms به فایل app.module.ts اضافه کنیم.

مانند نمونه زیر:

همانطور که در کد فوق مشاهده می کنید، ماژول FormsModule اضافه و آن را در بخش imports اضافه کرده ایم. حال باید خود فرم (قالب فرم) را در فایل app.component.html ایجاد کنیم:

در کد فوق سه عنصر از نوع input برای email، password و دکمه submit ایجاد کرده ایم. در فرم های ایجاد شده با رویکرد template-driven باید با استفاده از دستور ngModel و صفت name یک مدل از کنترل های موجود ایجاد کنیم. بنابراین هر جا که لازم باشد انگولار به عنصر دسترسی داشته باشد، باید ngModel را به آن اضافه کنیم. حال چون ما می خواهیم انگولار به email و password دسترسی داشته باشد، ngModel را به این دو تگ اضافه کرده ایم.

اگر به عنصر form نگاه کنید، ما ngForm را به #userLogin اضافه کرده ایم. همچنین یک تابع با نام onClickSubmit برای هندل کردن رویداد submit فرم رو نیز مشخص شده و مقداد userlogin.value به عنوان ورودی به آن تابع ارسال می شود.

حال تابع onClickSubmit را در فایل app.component.ts ایجاد می کنیم:

در کد فوق ما تابع onClickSubmit را پیاده سازی کرده ایم و زمانی که فرم submit شود، عنصر فرم به این تابع ارسال می شود.

محتوای CSS که به فایل app.component.css اضافه شده است:

خروجی برنامه:

angular7 forms 6630 1 تصویر

برای تست برنامه ایجاد شده یک ایمیل در ورودی email وارد کنید و بر روی دکمه submit کلیک کنید تا خروجی زیر را مشاهده کنید:

angular7 forms 6630 2 تصویر

روش Model Driven

در این روش باید ابتدا ماژول ReactiveFormsModule را از angular/forms وارد و در بخش imports اضافه کنیم.

مانند نمونه زیر:

در فایل app.component.ts برای استفاده از روش Model Driven باید چند ماژول دیگر (مانند FormGroup و FormControl) نیز به وارد کنیم.

متغیر formdata در شروع کلاس با شیء از FormGroup مقداردهی اولیه شده و یک مقدار پیشفرضی برای email و password تنظیم می کند. شما می توانید این مقادیر پیشفرض را تنظیم نکنید و فیلد به صورت خالی نمایش داده شود.

خروجی:

angular7 forms 6630 3 تصویر

ما برای مقداردهی به عناصر فرم از  متغیر formdata استفاده می کنیم.

مانند نمونه زیر:

در کد فوق برای آن که داده های formdata بر روی فرم اعمال شود، باید نام متغیر را در [formGroup] قرار دهیم. زمانی که فرم submit شود، تابع onClickSubmit با مقدار formdata.value فراخوانی می شود.

همچنین در تگ input از formControlName استفاده شده است که مقدار مشخص شده در فایل app.component.ts را به عنوان مقدار تگ تنظیم می کند. زمانی که بر روی دکمه کلیک شود، اطلاعات فرم به تابع onClickSubmit که در فایل app.component.ts ایجاد کرده ایم ارسال می شود و مقدار ایمیل در زیر فرم نمایش داده می شود.

angular7 forms 6630 4 تصویر

اعتبار سنجی فرم (Form Validation)

شما می توانید از روش های موجود در خود انگولار یا روش های سفارشی خودتان برای اعتبار سنجی فرم استفاده کنید. ما هر دو روش را بررسی خواهیم کرد. به منظور استفاده از قابلیت اعتبار سنجی انگولار باید موارد زیر را import کنید:

از جمله validator های موجود در خود انگولار می توان به فیلد اجباری (mandatory field)، کمترین طول (minlength)، بیشترین طول (maxlength) و الگو (pattern) اشاره کرد که از طریق ماژول Validators قابل دسترس است. شما می توانید از یک یا چند validator برای اعتبار سنجی یک فیلد استفاده کنید. برای درک بهتر ما دو validator زیر را برای ورودی ایمیل مشخص می کنیم:

  • Required
  • Pattern matching

در کد زیر نحوه استفاده از validator را مشاهده می کنید:

در Validators.compose شما می توانید لیستی از چیزایی که می خواهید برای اعتبار سنجی بررسی شوند، را مشخص کنید. در حال حاضر ما فقط required و pattern را اضافه کرده ایم.

در فایل app.component.html ما برای فعال بودن دکمه submit شرط گذاشته ایم و تا زمانی formdata معتبر نباشد، این دکمه غیرفعال خواهد بود.

خروجی:

angular7 forms 6630 5 تصویر

همانطور که در عکس فوق مشاهده می کنید، چون در ورودی ایمیل مقدار معتبری وارد نشده است، دکمه submit غیرفعال مانده است. حال اگر ما یک ایمیل معتبر در فیلد مربوط به ایمیل وارد کنیم، دکمه submit فعال خواهد شد.

angular7 forms 6630 6 تصویر

تا اینجای کار ما از validator های آماده خود انگولار استفاده کردیم. حال نحوه ساخت validator سفارشی را بررسی می کنیم. برای اینکار باید یک تابع سفارشی برای انجام اعتبار سنجی دلخواه ایجاد کنیم.

به نمونه زیر توجه کنید:

در کد فوق ما یک تابع با نام passwordvalidation برای بررسی طول پسورد وارد شده تعریف و در بخش passwd: new FormControl(“”, this.passwordvalidation) از آن استفاده کرده ایم.

خروجی برنامه:

angular7 forms 6630 7 تصویر

در تصویر فوق با این که مقدار ایمیل وارد شده معتبر است، اما چون طول پسورد از ۵ کاراکتر کمتر است، دکمه submit غیرفعال باقی مانده است. اگر هر دو فیلد ورودی معتبر باشند،  formdata نیز valid می شود و این موضوع باعث فعال شدن دکمه submit می گردد.

angular7 forms 6630 8 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۲ مورد)
  1. تصویر آواتار کاربر 0
    حسن علی نژاد دوشنبه , ۴ شهریور

    سلام، من می خواستم برای توسعه برنامه های وب یک فریم ورک مناسب رو یاد بگیرم. تو نت گشتم بیشتر فریم ورک Angular و ReactJS رو دیدم، حالا موندم بین این دوتا کدومو انتخاب کنیم. به نظرتون کدومشون بهتره؟

    • تصویر آواتار کاربر 1
      یعثوب سیفی زادهچهارشنبه , ۶ شهریور

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