در این قسمت از اموزش انگولار جی اس به بررسی فرم ها و چگونه اعتبار سنجی کردن فرمها خواهیم پرداخت پیشنهاد میشود قبل از ورود به این قسمت از اموزش قسمت های پیشین دوره angularjs را مطالعه فرمایید.
فرم های angularjs
کنترل ورودی ها
المان های زیر که در html هستند برای کنترل ورودی به کار میروند:
- input (فیلد ورودی )
- انتخابگرها
- دکمه ها
- ورودی متن ها
اتصال به داده ها
استفاده از دستورالعمل ng-model اتصال داده های فرم ها را فراهم میکند:
|
1 |
<input type="text" ng-model="firstname"> |
حال اپلیکیشن انگولار جی اس ما دارای مقدار firstname برای دستورالعمل ng-model است.
دستورالعمل ng-model وظیفه ی اتصال داده را به کل اپلیکیشن ما دارد.
مقدار firstname میتواند به داخل کنترل کننده ارجاع داده شود:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div ng-app="myApp" ng-controller="formCtrl"> <form> First Name: <input type="text" ng-model="firstname"> </form> </div> < script > var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.firstname = "Morteza"; }); </script> |
مقدار firstname همچنین میتواند به مکان دلخواه شما نیز ارجاع داده شود:
|
1 2 3 4 5 6 |
<div ng-app=""> <form> First Name: <input type="text" ng-model="firstname"> </form> <h1>You entered: {{firstname}}</h1> </div> |
انتخابگر یا checkbox
انتخابگر مقدار true یا false را دریافت مینماید. به مثال زیر در این باره توجه کنید.
|
1 2 3 4 5 6 7 |
<div ng-app=""> <form> برای نمایش دکمه ی زیر را در حالت انتخاب قرار دهید. <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">سربرگ من</h1> </div> |
در مثال بالا با انتخاب کردن انتخابگر سربرگ نمایان خواهد شد.
لیست های رادیویی یا Radiobuttons
اتصال لیست های رادیویی نیز با دستورالعمل ng-model صورت میگردد و برای هر یک از لیست ها باید مقدار (value) خاصی انتخاب کنید. به مثال زیر در این باره توجه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<form> یک موضوع برگزینید: <input type="radio" ng-model="myVar" value="dogs">سگ <input type="radio" ng-model="myVar" value="tuts">دوره ها <input type="radio" ng-model="myVar" value="cars">ماشین </form> <div ng-switch="myVar"> <div ng-switch-when="dogs"> <h1>سگ</h1> <p>شما موضوع سگ را انتخاب کردید.</p> </div> <div ng-switch-when="tuts"> <h1>دوره های اموزشی</h1> <p>شما دوره های اموزشی را انتخاب کردید.</p> </div> <div ng-switch-when="cars"> <h1>ماشین</h1> <p>شما موضوع ماشین را انتخاب کردید.</p> </div> </div> |
شما با انتخاب کردن هر یک از گزینه های لیست بالا یک موضوع متفاوتی را مشاهده خواهید کرد. اگر دقت کرده باشید مقدار ng-model برای همه ی موارد بالا یکسان است و فقط مقدار ارزشی (value) هر یک متفاوت است.
لیست انتخاب یا Selectbox
با دستورالعمل ng-model، باکس ها را به برنامه خود متصل کنید.
اموال تعریف شده در ویژگی ng-model مقدار انتخابی انتخاب شده در جعبه انتخاب را داشته باشد. به مثال زیر توجه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<form> یک موضوع انتخاب کنید: <select ng-model="myVar"> <option value=""> <option value="dogs">سگ <option value="tuts">دوره ها <option value="cars">ماشین </select> </form> <div ng-switch="myVar"> <div ng-switch-when="dogs"> <h1>سگ</h1> <p>شما موضوع سگ را انتخاب کردید</p> </div> <div ng-switch-when="tuts"> <h1>دوره اموزشی </h1> <p>شما دوره های اموزشی را انتخاب کردید</p> </div> <div ng-switch-when="cars"> <h1>ماشین</h1> <p>شما موضوع ماشین را انتخاب کردید.</p> </div> </div> |
در مثال بالا همانند مثال قبل هنگامی که یکی از انتخاب های لیست کشویی را انتخاب کنید مقداری برای شما نمایان خواهد شد.
نمونه فرم انگولاری
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">بازگردانی</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> < script > var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName:"Morteza", lastName:"Afzali"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script> |
در نمونه کد بالا هنگامی که شما مقداری در فرم ها قرار دهید مقدار from عوض میشود و با کلیک بر روی گزینه ی بازگردانی تمام مقادیر به مقادیر پیش فرض تغییر خواهند کرد.
ویژگی novalidate در HTML5 جدید است. هرگونه اعتبار سنجی مرورگر پیش فرض را غیر فعال می کند.
توضیحات برنامه فوق
دستورالعمل ng-app نشان دهنده ی اپلیکیشن انگولاری می باشد.
دستورالعمل ng-controller نشان دهنده ی کنترل کننده های اپلیکیشن انگولار می باشد.
دستورالعمل ng-model متصل کننده دو پارامتری ورودی و مقدار user در شی می باشد.
کنترل formCtrl مقادیر اولیه را به شی اصلی می دهد و متد reset() را تعریف می کند.
متد reset() شی کاربر را برابر با شی اصلی میگیرد.
دستورالعمل ng-click دستور متد reset() را فقط در صورت کلیک بر روی دکمه باز می کند.
ویژگی novalidate برای این برنامه مورد نیاز نیست، اما به طور معمول شما از آن در فرم AngularJS استفاده می کنید تا اعتبار استاندارد HTML5 را فراموش کنید.
امیدوارم این اموزش هم برای شما عزیزان مفید واقع شده باشد ، برای مطالعه مطالب بیشتر میتوانید به سایت w3schools مراجعه کنید.
پیروز باشید . کدپز
