İçindekiler
Tek sayfalık uygulamalar oluşturmaya çalışırken, vurgulayabileceğimiz noktalardan biri veri girişidir, bu tür işlevler genellikle bir biçimAçıkçası, bir kullanıcıdan veri talep edeceksek, bunların hatalarla gelmediğini doğrulamamız gerekir.neyse ki AngularJS Basit bir şekilde doğrulama yapmamızı sağlayan bazı dahili mekanizmalara sahiptir, böylece formun yalnızca veri formatı koşulları karşılandığında gönderilmesine izin verir.
İhtiyacımız olan ilk şey, bir biçim, bazı alanlar yerleştireceğiz, örneğin ad, soyad ve e-posta alanı, genellikle bunlar en çok kullanılan alan türleridir ve bu bize doğrulama oluşturma fırsatı verecektir. Sahip olduğumuz ilk kodu görelim:
İsim:Soyadı:E-posta:Yaş:Göndermek
Eğer bakarsak, özelliklerini kullandık HTML alanları doğrulamak için, örneğin özelliği yerleştirerek gereklidir gerekli alanlar için bunun yalnızca daha yeni veya uyumlu tarayıcılarda çalışacağını düşüneceklerdir. HTML5 sadece, ama kullandığımız zaman AngularJS, uygulamayı uyumlu olmayan bir tarayıcıda açarsak, bu alternatif doğrulamaları dolduracaktır. HTML5.
Yaş alanının, tip doğrulama dışında iki özelliği olduğunu görüyoruz. AngularJS alan uzunluğu içindir, bu, toplamda yalnızca 1 ile 3 basamak arasındaki sayıları yerleştirebileceğimiz anlamına gelir.
Şimdiye kadar alıştırmamızla iyi gidiyoruz, ancak yine de verileri göndermek için her şeyin doğrulanması gerektiğini doğrulamalıyız, bunun için bunu yapmamıza izin veren bir denetleyici oluşturmalıyız, bunun için forma hangisini belirteceğiz? denetleyici kullanacak, satırı değiştireceğiz:
Aşağıdakiler tarafından:
Denetleyicinin içinde adlı bir özelliğe erişebiliriz. $ geçerli, formumuzun veri gönderebilmek için geçerli olup olmadığını gösterecek olan, bunun için veri gönder düğmesinin satırını aşağıdaki ile değiştirmeliyiz:
Göndermek
Değişikliğin yapılması aşağıdaki gibi olmalıdır:
Göndermek
Son olarak, verilerimizi işleyeceğimiz AngularJS'de denetleyicimizi oluşturabiliriz:
function AddControllerUser ($ kapsam) {$ kapsam.message = ''; $scope.addUser = function () {$scope.message = 'Teşekkürler,' + $scope.user.name + ', eklendi!'; }; }
Bu bize tarayıcımızda aşağıdaki gibi bir sonuç vermelidir: