English
AngularJS Form and Input Management
In web applications, it is especially important to get data from form structure and user. AngularJS has specific directives and features for form elements so that forms and inputs are both user experience and customizable.
In this part of the training we will give a look at these features and give some examples of how we use it with a few codes.
Instant Accuracy Control in Forms
Often, client-side form control is more efficient for both the developer and the user. AngularJS offers verification classes that make it much more convenient.
Türkçe
AngularJS Form ve Input Yönetimi
Web uygulamalarında, özellikle form yapısı ve kullanıcıdan veri almak önemli bir yer tutmaktadır. AngularJS'de form ve input'ların hem kullanıcı deneyimi hem de özelleştirilebilir olması için form elementleri için özel direktifler ve özellikler bulunmaktadır.
Eğitimde bu bölümünde bu özeıliklere kuşbakışı değinip, birkaç kod ile nasıl kullandığımıza örnekler vereceğiz.
Formlarda Anlık Doğruluk Kontrolü
Çoğu zaman, istemci taraflı form kontrolü, hem geliştirici hem de kullanıcı için çok daha verimli sonuçıar vermektedir. AngularJS'in sunduğu doğrulama sınıfları ile bu durumu çok daha rahat hale getiriyor.
input elementi için geçerli doğrulama direktiflerini şöyle gösterebiliriz;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<input
ng-model="{ string }"
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
</input>
</body>
</html>
Burada kullandığımız direktifleri basitçe tanıtmamız gerekirse;
ng-model: Çokça kullandığımız, input elementini bir scope değişkenine bağlayan direktiftir. Değer olarak verilen expression, herhangi bir zaman için, bu input'un value değerine eşit olacaktır.
ng-required: Kullanılan input elementinin doldurulması zorunlu olduğunu gösterir. AngularJS bu özelliği kullanarak, doldurulması zorunlu alanlar boş olduğunda gerekli input elementlerine class (sınıf) atayarak görünüm tipini düzenlememize yardımcı olur.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<input ng-required="1"></input>
</body>
</html>
Bu örneğimiz için bu input'un onaylanabilmesi için value değerinin baştan farklı olması gerekir.
ng-minlength ve ng-maxlength: Bir sayı belirterek, kullanılan input içeriğinin onaylanabilmesi için gereken minimum ve maksimum value string'i uzunluğunu belirtir.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<input
ng-minlength="10"
ng-maxlength="20">
</input>
</body>
</html>
Bu örneğimiz için izin verilen uzunluk değeri 10 ve 20 karakter arasında olacak.
ng-pattern: AngularJS'de formlar oluştururken, kullanıcı deneyimi açısından uygulamaya çok rahat bir şekilde katılabilecek en iyi özelliklerden birisi yazı girdisi elementleri için bir örüntü (pattern) belirlememizi sağlayan ng-pattern direktifi. Bir örnek ile ng-pattern kullanarak bir input'un sayı olup olmadığı durumunu nasıl kullanacağımızı görelim:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<form name="form">
Fiyat: <input type="text" ng-model="fiyat" name="fiyat" ng-pattern="/^[0-9]{1,7}$/" required>
<br>
<span ng-show="form.fiyat.$error.pattern">Bu bir sayı değil.</span>
</form>
</body>
</html>
Örneğimizde, RegExp notasyonu ile oluşturduğumuz 0-9 arasında girilebilen karakterlerden bir ve yedi basamak aralığında bir sayı girilmesini istedik. Eğer kullanıcı bu isteğin dışına çıkarsa, ng-show ile gösterdiğimiz span elementi görünerek girilen sayının istediğimiz örüntüye uymadığını söyleyecek.
Not: RegExp hakkında daha fazla bilgi edinip, ng-pattern direktifini çok daha verimli kullanabilirsiniz;
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
ng-change: Bir form elementinin değeri değiştiğinde tetiklenen fonksiyonu taşıyan direktiftir. Javascript'in onchange event'i ile aynı işlevi görmektedir. AngularJS'in kendi çift taraflı veri bağlama özelliği nedeniyle fazla kullanılmasa da komplike uygulamalarda ve performans açısından gerekli durumlarda işimize yarayabiliyor.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<form name="form">
Input: <input type="text" ng-model="fiyat" ng-change="degisti()">
<br> Değişti mi: {{degistiMi}}
</form>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope) {
$scope.degistiMi = "hayır";
$scope.degisti = function() {
$scope.degistiMi = "evet";
}
});
</script>
</body>
</html>
Örneğimizde ng-change direktifinin nasıl çalıştığını kod içerisinde görebilirsiniz. Kontrol metodumuz içerisinde olan degistiMi scope fonksiyonu ile, input elementinin değişip değişmediğini kayıt altında tutuyoruz. Buna ek olarak, bu input elementi içeriği değiştirildiğinde, degisti() scope fonksiyonu çalışarak, altında bağlı olduğundan, input içeriğinin değişip değişmediğini kontrol ederek degistiMİ değerini evet'e değiştirecek ve bu değişken de, görünümde input bileceğiz.
Not: ng-change direktifi, özellikler formlarda form elemanlarının tamamının değiştirilip değiştirilmediğini kontrol etmek için kullanılabilecek gayet faydalı bir direktiftir diyebiliriz.
Form Verilerini Göderme Mantığı
AngularJS, çift taraflı veri bağlama özelliği ile anlık olarak her input verisine sistemin mantık tarafında ulaşabiliyorsunuz. Bu demek oluyor ki, klasik alışılmış Gönder butonu ile veriyi POST etmektense, AngularJS tarafından sağlanan ve AngularJS'de JSON Verileri ve Veri iletişimi bölümünde bahsettiğimiz $http servisi kuılanarak, kullanıcının formu göndermek istediği zamanı bir dinleyici alarak veri gönderme işlemini yapıyoruz.
Basit bir örnek ile bunun nasıl olacağını görelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<form name="form">
İsim: <input type="text" ng-model="isim"><br> Soyisim: <input type="text" ng-model="soyisim"><br>
<input type="button" ng-click="gonder()" value="Formu Gönder" /> {{durum}}
</form>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope, $http) {
$scope.durum = "";
$scope.gonder = function() {
var formObj = {
isim: $scope.isim,
soyisim: $scope.soyisim
}
$http.post('http://site.com/api', formObj).then(function(basariliResp) {
$scope.isim = "";
$scope.soyisim = "";
$scope.durum = "Gönderildi";
});
}
});
</script>
</body>
</html>
Bu örek kodumuzda, ng-model ile bağlanmış olan isim ve soyisim input'larını, göndermek istediğimiz zaman çalıştırdığımız $scope. Gonder() fonksiyonu ile bir form objesi haline getirerek gönderdik.
Not: AngularJS de bu tür bir sayfa içi XMLHttpRequest ile POST gönderme tekniğini kullanmamızın en büyük nedeni yaptığımız uygulamaların birer tek sayfa uygulaması olmasıdır. Yeni bir request için sayfa yüklemektense AngularJS tarafından sağlanan ve XMLHttpRequest kullanan $http servisini bu yuzden kullanıyoruz.
Github: https://github.com/angular/angular.js
Posted on Utopian.io - Rewarding Open Source Contributors