آنگولار جی ایس فرم

AngularJS 中的表单提供输入控件的数据绑定和验证。

عناصر الإدخال

输入控件是 HTML عناصر الإدخال：

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

数据绑定

输入控件通过使用 انوائیٹ اس کا معنای کنٹرولر اپلی کیشن کا تعریف کردی جاتی ہیں 指令提供数据绑定。

<input type="text" ng-model="firstname">

现在，该应用有一个名为 firstname 的属性。

انوائیٹ اس کا معنای کنٹرولر اپلی کیشن کا تعریف کردی جاتی ہیں 指令将输入控制器绑定到应用程序的其余部分。

属性 firstname，可以在控制器中引用：

مثال

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
});
</script>

آپ خود اس کا تجربہ کریں

它也可以在应用程序的其他位置被引用：

مثال

<form>
  名字: <input type="text" ng-model="firstname">
</form>
<h1>您输入的是：{{firstname}}</h1>

آپ خود اس کا تجربہ کریں

复选框

复选框的值为 true یا false。将 انوائیٹ اس کا معنای کنٹرولر اپلی کیشن کا تعریف کردی جاتی ہیں 指令应用于复选框，并在您的应用程序中使用其值。

مثال

如果选中复选框，则显示标题：

<form>
  选中以显示标题：
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">我的标题</h1>

آپ خود اس کا تجربہ کریں

单选按钮

از انوائیٹ اس کا معنای کنٹرولر اپلی کیشن کا تعریف کردی جاتی ہیں 指令将单选按钮绑定到您的应用程序。

具有相同 انوائیٹ اس کا معنای کنٹرولر اپلی کیشن کا تعریف کردی جاتی ہیں 的单选按钮可以有不同的值，但只会使用选定的值。

مثال

根据所选单选按钮的值显示一些文本：

<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。

فهرست انتخاب

از انوائیٹ اس کا معنای کنٹرولر اپلی کیشن کا تعریف کردی جاتی ہیں این دستورالعمل فهرست انتخاب را به برنامه شما متصل می‌کند.

انوائیٹ اس کا معنای کنٹرولر اپلی کیشن کا تعریف کردی جاتی ہیں ویژگی‌هایی که در معیار تعریف شده‌اند، دارای ارزش گزینه‌ای انتخاب شده در فهرست انتخاب خواهند بود.

مثال

متن بر اساس ارزش انتخاب شده نمایش داده خواهد شد:

<form>
  انتخاب یک موضوع:
  <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>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<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: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
});
</script>

آپ خود اس کا تجربہ کریں

نو دیبلیو سائی novalidate

نئی ویژن میں پرنٹ کی گئی خصوصیت ہے، وہ ایچ تی ایم ال5 میں نئی خصوصیت ہے، جو کسی بھی طبیعی براؤزر توثیق کو روکتی ہے

مثال وضاحت ng-app

انوائیٹ اس کا معنای آنگولار جی ایس ایپلی کیشن کا تعریف کردی جاتی ہیں ng-controller

انوائیٹ اس کا معنای کنٹرولر اپلی کیشن کا تعریف کردی جاتی ہیں ng-model

انوائیٹ دو انپوت ایلیمنٹس کو ماڈل میں یوزر آبجیکٹ سے بائنڈ کردی جاتی ہیں formCtrl ماسٹر کنٹرولر ری سیٹ() مетодات

ری سیٹ() آبجیکٹ کو ابتدائی کار کردی جاتی ہیں، اور سیٹ کردی جاتی ہیں یوزر آبجیکٹ کو مساوی طور پر سیٹ کردی جاتی ہیں ماسٹر آبجیکٹ

ng-click انوائیٹ جس میں بٹن پر کلک کیا جاتا ہے تو انوائیٹ کردی جاتی ہیں ری سیٹ() مетодات

اس ایپلی کیشن کو novalidate پروریٹی نہیں چاہئیے، لیکن عام طور پر آپ آنگولار جی ایس فرم میں اس کو استعمال کرتے ہیں، تاکہ اسٹینڈرڈ ایچ تی ایم ال5 توثیق کو اور کار کراتی ہو