ساخت form با آنگولار جی اس

فرم های موجود در AngularJS قابلیت اتصال به داده ها و اعتبار سنجی کنترل های ورودی را فراهم می کند.

مقالات

کنترل ورودی Input Controls

کنترل ورودی Input Controls عناصر ورودی HTML است:

input elements
select elements
button elements
textarea elements

اتصال داده Data-Binding
کنترل های ورودی، با استفاده از دستور ng-model، اتصال به داده ها را فراهم می کند.

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

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

این برنامه در حال حاضر مشخصه با نام و نام خانوادگی دارد.

دستور “ng-model” کنترل کننده ورودی را به بقیه برنامه شما متصل می کند.

مشخصه firstname می تواند در یک کنترلر ذکر شده باشد:

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
});
</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>

<form>

First Name: <input type="text" ng-model="firstname">

</form>

<h1>You entered: {{firstname}}</h1>

Checkbox

checkbox دارای مقدار true و false .دستور “ng-model” را به checkbox اضافه کنید و از آن در برنامه خود استفاده کنید.

مثال:

اگر checkbox چک شده باشد header نمایش داده می شود:

 <form>
    Check to show a header:
    <input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>

<form>

Check to show a header:

</form>

<h1 ng-show="myVar">My Header</h1>

Radiobuttons

دکمه های رادیویی را به برنامه خود با دستور “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>

<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 یا dog است یا tuts و یا cars می باشد.

Selectbox

select boxes ها را با دستور 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>

<form>

Select a topic:

<option value="dogs">Dogs

<option value="tuts">Tutorials

<option value="cars">Cars

</select>

</form>

مقدار myVar یا dog است یا tuts و یا cars می باشد.

نمونه ای از form ساخته شده با nagular js

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

First Name:<br>

Last Name:<br>

<button ng-click="reset()">RESET</button>

</form>

<p>master = {{master}}</p>

</div>

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 برنامه AngularJS را تعریف می کند.

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

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

کنترل formCtrl مقادیر اولیه را به شیء اصلی تعیین می کند و متد reset () را تعریف می کند.

متد reset () شیء کاربر را برابر با شی اصلی می گیرد.

دستور ng-click متد reset () را فقط در صورتی که دکمه روی آن کپی شده است فراخوانی می کند.

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

5/5 - (1 امتیاز)

ساخت form با آنگولار جی اس – angular forms

کنترل ورودی Input Controls

Checkbox

Radiobuttons

Selectbox

مطالب زیر را حتما مطالعه کنید

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

کنترل ورودی Input Controls

Checkbox

Radiobuttons

Selectbox

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

کار با event ها در آنگولار – AngularJS Events

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ