Angularjs Formlar veri bağlayıcı ve giriş kontrol doğrulama içerir.
Girdi Kontrolleri
Girdi kontrolleri HTML girişi öğeler şunlardır:
- giriş elemanları
- seçme elemanlar
- düğme elemanları
- metin alanı öğeleri
Bağlanma verileri
Giriş kontrolleri kullanarak veri bağlayıcı içerir ng-model yönergesi.
<input type="text" ng-model="firstname">
Uygulaması artık adında bir özellik var mı firstname .
ng-model direktifi başvurunuzun geri kalanına giriş kontrolörü bağlar.
Özelliği firstname , bir kontrol olarak ifade edilebilir:
Örnek
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Kendin dene " Ayrıca uygulamada başka yerde sevk edilebilir:
Örnek
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Kendin dene " Onay Kutusu
Bir onay kutusu değeri vardır true ya false . Uygula ng-model bir onay kutusu için direktif ve uygulamanızda 's değeri kullanın.
Örnek
onay kutusunun işaretli olup olmadığını başlığını göster:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Kendin dene " radiobuttons
Ile uygulamaya Bind radyo düğmeleri ng-model direktifi.
Aynı Radyo düğmeleri ng-model farklı değerlere sahip, ancak yalnızca seçilmiş bir kullanılacaktır.
Örnek
Seçilen radyo düğmesinin değerine dayalı bazı metinler, görüntüler:
<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>
Kendin dene " MyVar değeri ya olacak dogs , tuts veya cars .
selectbox
Ile uygulamaya seçme kutuları bağlayın ng-model direktifi.
Tanımlanan özellik ng-model öznitelik selectbox seçilen opsiyon değerine sahip olacaktır.
Örnek
Seçilen seçeneğin değerini temel bazı metinler, görüntüler:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Kendin dene " MyVar değeri ya olacak dogs , tuts veya cars .
Bir angularjs Formu Örneği
formu = {{kullanıcı}}
ana = {{ana}}
Uygulama Kodu
<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>
Kendin dene " novalidate nitelik HTML5'teki yenidir. Herhangi varsayılan tarayıcı doğrulama devre dışı bırakır.
Örnek Açıklaması
Ng uygulama yönergesi angularjs uygulaması tanımlar.
Ng kontrol cihazı yönergesi uygulama kontrolörü tanımlar.
Ng model yönergesi modelinde kullanıcı nesnesine iki giriş elemanları bağlanır.
FormCtrl kontrol ana nesnesine başlangıç değerlerini ayarlar ve tanımlar reset() metodu.
reset() yöntem, ana nesneye eşit kullanıcı nesnesi ayarlar.
Ng tıklama direktifi çağırır reset() düğmesi tıklandığında yalnızca, yöntem.
novalidate nitelik bu uygulama için gerekli değildir, ancak normalde standart HTML5 doğrulama geçersiz kılmak için, angularjs formlarda kullanacağız.