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

فرم های angularjs

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

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

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

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

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

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

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

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

  

    First Name: 
  

< script >
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "Morteza";
});

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

  

    First Name: 
  
  
You entered: {{firstname}}

انتخابگر یا checkbox

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

  

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

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

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

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

  یک موضوع برگزینید:
  سگ
  دوره ها
  ماشین


  

     
سگ
     
شما موضوع سگ را انتخاب کردید.
  
  

     
دوره های اموزشی
     
شما دوره های اموزشی را انتخاب کردید.
  
  

     
ماشین
     
شما موضوع ماشین را انتخاب کردید.
  

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

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

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

  یک موضوع انتخاب کنید:
  
    
    سگ
    دوره ها
    ماشین
  


  

     
سگ
     
شما موضوع سگ را انتخاب کردید
  
  

     
دوره اموزشی 
     
شما دوره های اموزشی را انتخاب کردید
  
  

     
ماشین
     
شما موضوع ماشین را انتخاب کردید.
  

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

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

  

    First Name:

    

    Last Name:

    
    


    بازگردانی
  
  
form = {{user}}
  
master = {{master}}

< 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();
});

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

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

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

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

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

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