AngularJS formalari
AngularJS’dagi formalar ma’lumotlarni bog‘lash va kiritish boshqaruv elementlarini tekshirish (validatsiya) imkoniyatini beradi.
Kiritish boshqaruv elementlari
Kiritish boshqaruv elementlari — bu HTML kiritish elementlari:
- input elementlari
- select elementlari
- button elementlari
- textarea elementlari
Ma’lumotlarni bog‘lash
Kiritish boshqaruv elementlari ng-model direktivasi yordamida ma’lumotlarni bog‘lashni ta’minlaydi.
<input type="text" ng-model="firstname">
Endi ilovada firstname nomli xususiyat mavjud.
ng-model direktivasi kiritish boshqaruv elementini ilovangizning qolgan qismiga bog‘laydi.
firstname xususiyatiga kontrollerda murojaat qilish mumkin:
Misol
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>
O‘zingiz sinab ko‘ring »
Unga ilovaning boshqa joylarida ham murojaat qilish mumkin:
Misol
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
O‘zingiz sinab ko‘ring »
Checkbox
Checkbox’ning qiymati true yoki false bo‘ladi.
Checkbox’ga ng-model direktivasini qo‘llang va uning qiymatidan ilovangizda foydalaning.
Misol
Checkbox belgilangan bo‘lsa, sarlavhani ko‘rsating:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
O‘zingiz sinab ko‘ring »
Radio tugmalar
Radio tugmalarni ilovangizga ng-model direktivasi yordamida bog‘lang.
ng-model qiymati bir xil bo‘lgan radio tugmalar turli qiymatlarga ega bo‘lishi mumkin, ammo faqat tanlangani ishlatiladi.
Misol
Tanlangan radio tugma qiymatiga qarab biror matnni ko‘rsating:
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
O‘zingiz sinab ko‘ring »
myVar qiymati dogs, tuts yoki cars bo‘ladi.
Select ro‘yxati
Select ro‘yxatlarini ilovangizga ng-model direktivasi yordamida bog‘lang.
ng-model atributida belgilangan xususiyat select ro‘yxatida tanlangan variant qiymatiga ega bo‘ladi.
Misol
Tanlangan variant qiymatiga qarab biror matnni ko‘rsating:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
O‘zingiz sinab ko‘ring »
myVar qiymati dogs, tuts yoki cars bo‘ladi.
AngularJS formasi misoli
form = {{user}}
master = {{master}}
Ilova kodi
<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>
O‘zingiz sinab ko‘ring »
novalidate atributi HTML5’da yangi.
U brauzerning standart tekshiruvini (validatsiyasini) o‘chiradi.
Misol izohi
ng-app direktivasi AngularJS ilovasini belgilaydi.
ng-controller direktivasi ilova kontrollerini belgilaydi.
ng-model direktivasi ikkita input elementini modeldagi user obyektiga bog‘laydi.
formCtrl kontrolleri master obyektiga boshlang‘ich qiymatlar beradi va reset() metodini belgilaydi.
reset() metodi user obyektini master obyektiga tenglashtiradi.
ng-click direktivasi reset() metodini faqat tugma bosilgandagina chaqiradi.
Bu ilova uchun novalidate atributi shart emas, ammo odatda standart HTML5 validatsiyasini bekor qilish uchun uni AngularJS formalarida ishlatasiz.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!