آموزش کار با فرم ها در آنگولار 8

آموزش کار با فرم ها در آنگولار 8

در این مقاله، ما به بررسی فرم های Angular 8 می پردازیم. Angular 8 دو رویکرد متفاوت برای مدیریت کاربران از طریق یک فرم فراهم می کند.

فرم ها در انگولار 8

 

  • Reactive Approach (رویکرد واکنش پذیر)

  • Template-driven Approach (رویکرد الگو محور)


هر دو روش بلوک های ساختاری مشترک از فرم های Angular را به اشتراک می گذارند و برای مدیریت ورودی کاربر و انجام کلیه کارهای ورود داده استفاده می شوند.

 

فرم ها در آنگولار 8

در این مقاله، ما به بررسی فرم های Angular 8 می پردازیم. Angular 8 دو رویکرد متفاوت برای مدیریت کاربران از طریق یک فرم فراهم می کند.

آموزش آنگولار (فرم ها)

  • Reactive Approach (رویکرد واکنش پذیر)

  • Template-driven Approach (رویکرد الگو محور)


هر دو روش بلوک های ساختاری مشترک از فرم های Angular را به اشتراک می گذارند و برای مدیریت ورودی کاربر و انجام کلیه کارهای ورود داده استفاده می شوند.

بلوک های ساختاری مشترک Angular Forms به صورت زیر است:

 

  • FormControl - قابلیت های اصلی کنترل فرم به صورت تکی.

  • FormGroup - مقادیر کنترل هر فرم را جمع می کند.

  • FormArray - مقادیر کنترل هر فرم را در یک آرایه جمع می کند.

  • ControlValueAccessor - واسط (پل بین عناصر Angular Forms API و DOM).

 

Reactive Forms (فرم های واکنش پذیر)

 

  • Reactive Forms چیست؟

 

Reactive forms به عنوان فرم های مدل محور model-driven forms نیز شناخته می شوند. در فرم های واکنشی، بیشتر کارها در کلاس کامپوننت انجام می شود.


Template-driven Forms (فرم های الگو محور)

 

  • Template-driven Forms چیست؟

 

فرم های مدل محور صرفاً به Template (قالب / الگو) بستگی دارند. از آن برای افزودن فرم های ورود ساده به یک برنامه وب استفاده می شود که فقط به الگو یا Template بستگی دارد.

 

این مطلب را هم بخوانید:

 

تفاوت بین Reactive Forms و Template-driven Forms

 

  • تفاوت بین فرم های واکنش پذیر و فرم های الگومحور 

تفاوت بین فرم واکنش پذیر و الگو محور


مثالی از Angular Reactive Forms


گام اول:


در app.module.ts، باید ReactiveFormsModule را از طریق کتابخانه angular/forms@ وارد کرد.


آموزش فارسی آنگولار 8


گام دوم:


در app.component.ts باید formcontrol را از طریق angular/forms@ وارد کرد.

 

معرفی فرم ها در angular 8


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


گام سوم:


در آخر فایل app.component.html را بنویسید.

آموزش آنگولار 8


در کد بالا، ما یک textbox با مقدار اولیه و یک دکمه ایجاد کرده ایم که تابع ()setvalue را صدا می زند. بنابراین وقتی کاربر دکمه ارسال را فشار می دهد، مقادیر اولیه توسط رویداد onclick جایگزین می شوند.

انواع فرم ها در انگولار8


بنابراین خروجی فرم های Reactive به شکل زیر خواهدبود:


ایجاد reactive forms در انگولار8

 

مثالی از Template-driven Forms


گام اول:


در app.module.ts ما باید formsmodule را از طریق کتابخانه angular/forms@ وارد کنیم.

فرم الگو محور در انگولار8


در کد بالا، formmodule برای صادر کردن بخشنامه های فرم های الگو محور و در دسترس قرار دادن آنها برای ngmodule استفاده می شود.

گام دوم:


در app.component.ts، ما نیاز به ایجاد یک مدل و ایجاد تغییرات در مدل از طریق textbox داریم. 


template-driven forms در آنگولار8


گام سوم:


در آخر فایل app.component.html را بنویسید.


تفاوت بین  template-driven forms و reactive forms


در کد بالا دو textbox ایجاد کرده ایم. فرمهای الگو محور صرفاً روی قالبها کار می کنند.


خروجی:

template-driven forms در انگولار 8



بنابراین ما رویکرد فرم ها در angular 8 را برای شما عزیزان توضیح دادیم. در قسمت های بعد بیشتر راجع به آنگولار 8 صحبت خواهیم کرد.

منبع: c-sharpcorner

"تهیه شده در مجموعه ABLY"

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس