قسمت هفدهم AngularJS : اعتبار سنجی فرم ها در انگولار چگونه انجام میشود؟

خانه » مقالات اموزشی » javascript » قسمت هفدهم AngularJS : اعتبار سنجی فرم ها در انگولار چگونه انجام میشود؟
قسمت هفدهم AngularJS : چگونه به فرم ها در انگولار اعتبار ببخشیم؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

3067

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۲-۱۸

Work time-rafiki

زمان مطالعه:

5 دقیقه

در این قسمت از اموزش انگولار جی اس به بررسی فرم ها و چگونه اعتبار سنجی کردن فرمها خواهیم پرداخت پیشنهاد میشود قبل از ورود به این قسمت از اموزش قسمت های پیشین دوره angularjs را مطالعه فرمایید.

فرم های angularjs

کنترل ورودی ها

المان های زیر که در html هستند برای کنترل ورودی به کار میروند:

  • input (فیلد ورودی )
  • انتخابگرها
  • دکمه ها
  • ورودی متن ها

اتصال به داده ها

استفاده از دستورالعمل ng-model اتصال داده های فرم ها را فراهم میکند:

حال اپلیکیشن انگولار جی اس ما دارای مقدار firstname برای دستورالعمل ng-model است.

دستورالعمل ng-model وظیفه ی اتصال داده را به کل اپلیکیشن ما دارد.

مقدار firstname میتواند به داخل کنترل کننده ارجاع داده شود:

مقدار firstname همچنین میتواند به مکان دلخواه شما نیز ارجاع داده شود:

انتخابگر یا checkbox

انتخابگر مقدار true یا false را دریافت مینماید. به مثال زیر در این باره توجه کنید.

در مثال بالا با انتخاب کردن انتخابگر سربرگ نمایان خواهد شد.

لیست های رادیویی یا Radiobuttons

اتصال لیست های رادیویی نیز با دستورالعمل ng-model صورت میگردد و برای هر یک از لیست ها باید مقدار (value) خاصی انتخاب کنید. به مثال زیر در این باره توجه کنید.

شما با انتخاب کردن هر یک از گزینه های لیست بالا یک موضوع متفاوتی را مشاهده خواهید کرد. اگر دقت کرده باشید مقدار ng-model برای همه ی موارد بالا یکسان است و فقط مقدار ارزشی (value) هر یک متفاوت است.

لیست انتخاب یا Selectbox

با دستورالعمل ng-model، باکس ها را به برنامه خود متصل کنید.
اموال تعریف شده در ویژگی ng-model مقدار انتخابی انتخاب شده در جعبه انتخاب را داشته باشد. به مثال زیر توجه کنید.

در مثال بالا همانند مثال قبل هنگامی که یکی از انتخاب های لیست کشویی را انتخاب کنید مقداری برای شما نمایان خواهد شد.

نمونه فرم انگولاری

در نمونه کد بالا هنگامی که شما مقداری در فرم ها قرار دهید مقدار from عوض میشود و با کلیک بر روی گزینه ی بازگردانی تمام مقادیر به مقادیر پیش فرض تغییر خواهند کرد.

ویژگی novalidate در HTML5 جدید است. هرگونه اعتبار سنجی مرورگر پیش فرض را غیر فعال می کند.

توضیحات برنامه فوق

دستورالعمل ng-app نشان دهنده ی اپلیکیشن انگولاری می باشد.
دستورالعمل ng-controller نشان دهنده ی کنترل کننده های اپلیکیشن انگولار می باشد.
دستورالعمل ng-model متصل کننده دو پارامتری ورودی و مقدار user در شی می باشد.
کنترل formCtrl مقادیر اولیه را به شی اصلی می دهد و متد reset() را تعریف می کند.
متد reset() شی کاربر را برابر با شی اصلی میگیرد.
دستورالعمل ng-click دستور متد reset() را فقط در صورت کلیک بر روی دکمه باز می کند.
ویژگی novalidate برای این برنامه مورد نیاز نیست، اما به طور معمول شما از آن در فرم AngularJS استفاده می کنید تا اعتبار استاندارد HTML5 را فراموش کنید.

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

پیروز باشید . کدپز

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید