فرم ها در AngularJS

فرم ها در AngularJS

فرم در AngularJS عبارت است از یک مجموعه از کنترل ها که ورودی دریافت می کنند.

کنترل های HTML

المان هایی که در HTML ورودی می پذیرند ( input elements )، عبارتند از:

المان input

المان select

المان های button

المان های textare

فرم های HTML

فرم های HTML کنترل های HTML را در یک مجموعه و پکیج واحد گنجانده و گروه بندی می کند.

نمونه ای از فرم AngularJS

<!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="Angular.js"></script> </head> <body> <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()">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: "John", lastName: "Doe" }; $scope.reset = function () { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script> </body> </html>

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

شرح برنامه:

دستور ng-app همان طور که می دانید برنامه ی AngularJS را تعریف می کند.

دستور ng-controller هم که کنترلگر برنامه را تعریف می کند.

دستور ng-model دو المان های input را به شی user در مدل bind می کند.

متد formCtrl مقادیر اولیه را در شی master تنظیم می کند و نیز متد ()reset را اعلان می کند.

()reset شی user را با master برابر قرار می دهد.

دستور ng-click ، تنها در صورتی که دکمه ی مورد نظر کلیک شود متد reset را صدا می زند.

خصیصه novalidate (attribute ) برای برنامه ی حاضر مورد نیاز نمی باشد، اما اغلب از آن در فرم ها به منظور بازنویسی ( override ) اعتبارسنجی معمول ( validation ) HTML استفاده می شود.



نظرات کاربران



عبارت امنیتی : حاصل 7 × 2 می شود :
متن پیام :