السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

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

یک فرم انگولار، درواقع یک مجموعه از کنترل های input(ورودی) است.


کنترل های HTML

به عناصر ورودی(input) اچ تی ام ال، کنترل های HTML گفته می شود:

  • عناصر input 
  • عناصر select 
  • عناصر button 
  • عناصر textarea 

فرم های HTML

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


مثالی از یک فرم انگولار

نام:

نام خانوادگی:
 

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}


کد اپلیکیشن

<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>
خودتان امتحان کنید »
Note

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


توضیح مثال بالا

دستور ng-app  اپلیکیشن انگولار را تعریف می کند. 

دستور ng-controller در واقع کنترلر اپلیکیشن را تعریف می کند. 

دستور ng-model دو عنصر input را به شیء user در مدل(model)، پیوند می دهد. 

تابع formCtrl مقادیر اولیه را در شیء master ست می کند و همچنین متد ()reset  را تعریف می کند. 

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

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

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

دیدگاه‌ها  

+2 # سحر19 1395-08-27 12:05
با احترام
لینک های خودتان امتحان کنید خراب است
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-08-27 12:51
سلام لینک این صفحه که سالم هست. دقیقا نتیجه رو مشابه با لینک زیر توی w3schools نشون می ده:
www.w3schools.com/angular/tryit.asp?filename=try_ng_form
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی