فرم AngularJS

AngularJS forms provide data binding and validation for input controls.

Input controls

Input controls are HTML input elements:

• input element
• select element
• button element
• textarea element

data binding

Input controls use ng-model Directive provides data binding.

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

Now, the application has a named firstname .

ng-model The directive binds the input controller to the rest of the application.

attribute firstname, which can be referenced in the controller:

مثال

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

با دست خود امتحان کنید

It can also be referenced at other locations in the application:

مثال

<form>
  Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>

با دست خود امتحان کنید

Checkbox

checkbox is true یا false.The value of the ng-model The directive is applied to the checkbox and uses its value in your application.

مثال

If the checkbox is selected, the title will be displayed:

<form>
  Select to display the title:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My title</h1>

با دست خود امتحان کنید

Radio buttons

از ng-model The directive binds the radio button to your application.

with the same ng-model The radio button can have different values, but only the selected value will be used.

مثال

Based on the value of the selected radio button, some text will be displayed:

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

گزینه‌های انتخابی

از ng-model دستورالعمل‌ها گزینه‌های انتخابی را به برنامه شما پیوند می‌دهند.

ng-model ویژگی‌هایی که در ویژگی‌های تعریف شده تعریف شده‌اند، دارای ارزش گزینه انتخاب شده در گزینه‌های انتخابی خواهند بود.

مثال

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

<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()">تنظیم مجدد</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 ویژگی یک ویژگی جدید در HTML5 است. آن هرگونه تأیید پیش‌فرض مرورگر را غیرفعال می‌کند.

مثال توضیح داده شده

ng-app دستورالعمل برنامه AngularJS را تعریف می‌کند.

ng-controller دستورالعمل کنترل‌گر برنامه را تعریف می‌کند.

ng-model دستورالعمل دو عنصر ورودی را به اشیاء کاربر در مدل پیوند می‌دهد.

formCtrl کنترل‌گر مستر مقدار اولیه اشیاء را تنظیم کرده و تعریف می‌کند reset() روش.

reset() روش اشیاء را تنظیم می‌کند کاربر اشیاء تنظیم شده به برابر مستر اشیاء.

ng-click دستورالعمل تنها در صورت کلیک بر روی دکمه فراخوانی می‌شود reset() روش.

این برنامه نیازی به ویژگی novalidate ندارد، اما معمولاً شما آن را در فرم‌های AngularJS استفاده می‌کنید تا تأیید استاندارد HTML5 را پوشش دهید.