النماذج في AngularJS توفر البيانات ملزمة والتحقق من الضوابط الإدخال.
ضوابط الإدخال
ضوابط المدخلات هي عناصر الإدخال HTML:
- عناصر الإدخال
- عناصر مختارة
- عناصر زر
- عناصر تيكستاريا
ربط البيانات
ضوابط مدخلات توفر ربط البيانات باستخدام ng-model التوجيه.
<input type="text" ng-model="firstname">
لا يكون التطبيق الآن خاصية اسمه firstname .
و ng-model التوجيه يربط وحدة تحكم مساهمة في بقية طلبك.
الخاصية firstname ، ويمكن أن يشار إليها في وحدة تحكم:
مثال
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> انها محاولة لنفسك » ويمكن أيضا أن يشار إلى مكان آخر في التطبيق:
مثال
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
انها محاولة لنفسك » مربع
خانة اختيار له قيمة true أو false . تطبيق ng-model التوجيه إلى مربع، واستخدامه في القيمة في التطبيق الخاص بك.
مثال
عرض رأس إذا تم تحديد خانة الاختيار:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
انها محاولة لنفسك » أزرار الراديو
أزرار ربط التطبيق الخاص بك مع ng-model التوجيه.
أزرار بنفس ng-model يمكن أن يكون لها قيم مختلفة، ولكن لن يستخدم إلا في واحدة مختارة.
مثال
عرض بعض النصوص، بناء على قيمة زر الراديو المحددة:
<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>
انها محاولة لنفسك » فإن قيمة myVar تكون إما dogs ، tuts ، أو cars .
Selectbox
ربط مربعات التحديد إلى التطبيق الخاص بك مع ng-model التوجيه.
الخاصية المحددة في ng-model سوف سمة لها قيمة الخيار المحدد في selectbox.
مثال
عرض بعض النصوص، استنادا إلى قيمة الخيار المحدد:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
انها محاولة لنفسك » فإن قيمة myVar تكون إما dogs ، tuts ، أو cars .
وAngularJS نموذج مثال
شكل = {{مستخدم}}
سيد = {{ماجستير}}
كود التطبيق
<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>
انها محاولة لنفسك »  | السمة novalidate هو جديد في HTML5. فإنه تعطيل أي التحقق من صحة المتصفح الافتراضي. |
|---|
وأوضح مثال
يعرف التوجيه نانوغرام التطبيق تطبيق AngularJS.
يعرف التوجيه نانوغرام تحكم وحدة تحكم التطبيق.
التوجيه نانوغرام نموذج يربط اثنين من عناصر المدخلات إلى كائن المستخدم في النموذج.
وحدة تحكم formCtrl يحدد القيم الأولية لكائن الرئيسية، ويحدد طريقة إعادة تعيين ().
طريقة إعادة تعيين () تحدد كائن المستخدم يساوي الكائن الرئيسي.
ونانوغرام بنقرة وتوجيه استدعاء الأسلوب إعادة تعيين ()، إلا إذا تم النقر على زر.
ليست هناك حاجة السمة novalidate لهذا التطبيق، ولكن عادة ما سوف استخدامها في أشكال AngularJS، لتجاوز التحقق من صحة HTML5 القياسية.