آموزش انگولار-فرم ها
یک فرم انگولار، درواقع یک مجموعه از کنترل های input(ورودی) است.
کنترل های HTML
به عناصر ورودی(input) اچ تی ام ال، کنترل های HTML گفته می شود:
- عناصر input
- عناصر select
- عناصر button
- عناصر textarea
فرم های HTML
فرم های HTML درواقع کنترل های HTML را گروه بندی می کنند.
مثالی از یک فرم انگولار
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
کد اپلیکیشن
<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>
 |
خصوصیت novalidate در HTML5 جدید می باشد. این خصوصیت هرگونه اعتبار سنجی پیش فرض مرورگر را غیرفعال می کند. |
|---|
توضیح مثال بالا
دستور ng-app اپلیکیشن انگولار را تعریف می کند.
دستور ng-controller در واقع کنترلر اپلیکیشن را تعریف می کند.
دستور ng-model دو عنصر input را به شیء user در مدل(model)، پیوند می دهد.
تابع formCtrl مقادیر اولیه را در شیء master ست می کند و همچنین متد ()reset را تعریف می کند.
متد ()reset شیء user را برابر با شیء master قرار می دهد.
دستور ng-click متد reset را فراخوانی می کند تنها در صورتی که دکمه ی مورد نظر کلیک شود.
خصوصیت novalidate برای این اپلیکیشن مورد نیاز نیست، اما شما ممکن است بخواهید از آن در فرم ها استفاده کنید تا در اعتبار سنجی های استاندارد HTML5 برتر باید.
- نوشته شده توسط احسان عباسی
- بازدید: 8421
دیدگاه‌ها
با احترام
لینک های خودتان امتحان کنید خراب است
سلام لینک این صفحه که سالم هست. دقیقا نتیجه رو مشابه با لینک زیر توی w3schools نشون می ده:
www.w3schools.com/angular/tryit.asp?filename=try_ng_form