AngularJS'de ng-submit: Örnekle Form Gönderimini Yönetme
James Hartman
⚡ Akıllı Özet
AngularJS'deki `ng-submit`, bir denetleyici fonksiyonunu formun tarayıcıdaki `submit` olayına bağlar; böylece girilen değerler denetleyici içinde işlenir ve sayfa varsayılan bir `POST` işlemiyle asla yeniden yüklenmez.
AngularJS ng-gönderme Yönergesi
MKS ng-gönder AngularJS'deki yönerge, uygulamayı tarayıcının gönderme olayına bağlamak için kullanılır. Yani şu durumda angularjs gönder olayında denetleyicinin kendisinde bazı işlemler gerçekleştirebilir ve ardından işlenen bilgileri kullanıcıya görüntüleyebilirsiniz.
Sürüm notu: AngularJS 1.x, 31 Aralık 2021 tarihinde uzun vadeli destekten çıkarıldı ve çerçeve ekibi bunu doğruladı. AngularJS desteği resmen sona erdi. Ocak 2022'de yayınlandı, bu nedenle bundan sonra herhangi bir sürüm veya güvenlik yaması yayınlanmayacak. Aşağıdaki her adım ve kod bloğu, tarihsel referans olarak aynen yazıldığı gibi korunmuştur. Yeni çalışmalar, aynı fikri ifade eden modern Angular'a aittir. (ngSubmit) bir FormGroup'a bağlı.
Ng-submit kullanarak AngularJS'de Form Nasıl Gönderilir
Bir web sayfasında bilgi gönderme işlemleri normalde web tarayıcısındaki gönder olayı tarafından gerçekleştirilir. Bu olay normalde kullanıcının bir web sayfasına girmiş olabileceği oturum açma kimlik bilgileri, form verileri vb. gibi daha ileri işlemler için sunucuya bilgi göndermek için kullanılır. Bilgilerin gönderilmesi GET veya POST isteği yoluyla yapılabilir.
AngularJS'de formların nasıl gönderileceğini görmek için Angular form gönderme örneğini ele alalım.
AngularJS form submit örneğimizde, kullanıcıya öğrenmek istediği konuyu girebileceği bir textbox sunacağız. Sayfada, basıldığında konuyu sıralanmamış bir listeye ekleyecek bir submit butonu olacak.
Aşağıdaki resim tracMetin kutusuna yazılan konudan, Gönder düğmesine kadar ve oradan da altına eklenen liste öğesine kadar uzanan bir akış söz konusudur.
AngularJS Form Gönderimi Örneği
Şimdi, ng-submit direktifini kullanarak Denetleyiciden AngularJS form gönderiminin bir örneğini göreceğiz:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Code Açıklama:
- Öncelikle, Angular form gönderme olayı örneğinde gösterildiği gibi "metin kutusu" ve "gönder düğmesi" kontrolünü içerecek olan form HTML etiketimizi tanımlıyoruz. Ardından, "Display()" fonksiyonunu formumuza bağlamak için ng-submit AngularJS yönergesini kullanıyoruz. Bu fonksiyon, denetleyicimizde tanımlanacak ve form gönderildiğinde çağrılacaktır.
- Kullanıcının öğrenmek istediği Konuyu gireceği bir metin kontrolümüz var. Bu, denetleyicimizde kullanılacak 'Konu' adlı bir değişkene bağlanacaktır.
- AngularJS'de kullanıcının istediği konuya girdiğinde tıklayacağı normal gönder butonu bulunmaktadır.
- Kullandık ng-tekrar Kullanıcının girdiği konuların liste öğelerini görüntüleme yönergesi. Ng-repeat yönergesi 'AllTopic' dizisindeki her konuyu inceler ve konu adını buna göre görüntüler.
- Denetleyicimizde, 'AllTopic' adında bir dizi değişkeni tanımlıyoruz. Bu değişken, kullanıcının 2. adımda girdiği tüm konuları saklamak için kullanılacaktır.
- Kullanıcı Gönder butonuna tıkladığında çağrılacak olan Display() fonksiyonumuzun kodunu tanımlıyoruz. Burada, kullanıcı tarafından 'Konu' değişkeni aracılığıyla girilen Konuları 'AllTopic' dizimize eklemek için push dizi fonksiyonunu kullanıyoruz.
AngularJS form örnek kodu başarılı bir şekilde yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Kodun çalıştığını görmek için öncelikle yukarıda gösterildiği gibi metin kutusuna “Angular” gibi bir Konu adı girin ve ardından Gönder butonuna tıklayın.
- Gönder butonuna tıkladıktan sonra metin kutusuna girilen öğenin öğeler listesine eklendiğini göreceksiniz.
- Bu, gönder düğmesine basıldığında çağrılan Display() işleviyle gerçekleştirilir.
- Display() işlevi, metni 'AllTopic' adlı dizi değişkenine ekler. Ve ng-repeat direktifimiz 'AllTopic' dizi değişkenindeki her değeri inceler ve bunları buna göre liste öğeleri olarak görüntüler.
ng-submit vs ng-click: Hangisi Kullanılmalı
Her ikisi de AngularJS yönergeleri Aynı denetleyici fonksiyonunu çağırabilirler, ancak farklı tarayıcı olaylarını dinlerler. ng-submit üzerinde oturur <form> Bu etiket, gönderim olayına tepki verir; dolayısıyla kullanıcı bir alanda Enter tuşuna bastığında da tetiklenir. ng-click Bir düğme üzerinde bulunur ve yalnızca fare tıklamasına veya eşdeğer bir aktivasyona tepki verir.
| Görünüş | ng-gönder | ng-tıklama |
|---|---|---|
| Ana öğe | Form etiketi | Tıklanabilir herhangi bir öğe |
| Dinlenen etkinlik | Enter tuşu da dahil olmak üzere gönder | sadece tıklayın |
| Varsayılan tarayıcı POST | Yönergeyle bastırıldı | Hala gönder düğmesinden tetikleniyor. |
| Form durumuna erişim | Form denetleyicisinde `$valid` ve `$invalid` değerlerini okur. | Kendi başına herhangi bir biçim bağlamı yok. |
| Doğal uyum | Form verilerini bir denetleyiciye iletmek | Araç çubuğu düğmeleri, bağlantılar, modal pencere tetikleyicileri |
Klavye desteği genellikle seçimi belirler. Kablolu bir form ng-click Yalnızca "Enter" tuşunu görmezden gelir, bu da giriş kutusunu dolduran kullanıcıları hayal kırıklığına uğratır. Reserve ng-click Form gönderimi olmayan işlemler için, örneğin bir alanı temizlemek veya bir iletişim kutusu açmak gibi.
ng-submit neden varsayılan tarayıcı gönderimini engelliyor?
Basit bir HTML formu, gönderim olayına tepki olarak alanlarını serileştirir ve tarayıcıdan yeni bir sayfa yüklemesini ister; bu da formda tutulan her değeri yok sayar. $scope. ng-submit Bu yönerge bunun olmasını engelliyor: çağırıyor preventDefault() Sizin için, böylece ifade çalışır ve mevcut sayfa yerinde kalır. Hayır $event Tartışmaya gerek yok ve manuel çağrıya da ihtiyaç duyulmuyor.
Baskının belgelenmiş bir koşulu var. Buna göre... ngSubmit referansıVarsayılan işlem yalnızca formda herhangi bir bilgi bulunmadığı sürece engellenir. action, data-action or x-action Bu özelliklerden herhangi birini ekleyin ve işleyici bittikten sonra tarayıcı her zamanki gibi gezinmeye devam eder; bu, aşamalı olarak geliştirilen sunucu tarafından oluşturulan bir form için doğru davranıştır, ancak diğer her yerde bir sürprizdir.
Yönerge olay nesnesini yuttuğu için, gönderilen değerleri özelliklerden okuyun. ng modeli Kapsama alanına yazın veya bunları açıkça iletin, örneğin: ng-submit="Display(Topic)".
ng-submit çalıştırılmadan önce bir formun nasıl doğrulanacağı
Yukarıdaki örnek boş bir konuyu kabul eder çünkü önce metin kutusunu kontrol eden bir şey yoktur. AngularJS, her adlandırılmış form için bir form denetleyicisi oluşturur ve bu denetleyici, gönderimi kontrol etmek için gereken bayrakları sunar. Ekleyin novalidate Bu nedenle tarayıcı kendi HTML5 baloncuklarını kapalı bırakır ve AngularJS form doğrulama devralır.
- Forma bir tane verin.
nameAngularJS, bu isimde bir denetleyiciyi çevreleyen ortama yayınlar. kontrolör dürbün. - Ekle
novalidateForm etiketine ekleyerek, tarayıcının yerel doğrulamasının devre dışı kalmasını sağlıyoruz. - Alanları aşağıdaki yöntemle işaretleyin.
required,ng-minlength,ng-maxlengthorng-pattern. - Eğitmenini koruyun.
$validAyrıca, fonksiyonun tek tek alanları inceleyebilmesi için form denetleyicisini de iletin. - Düğmeyi devre dışı bırakın
ng-disabledişaret ederek$invalidBu da anında görsel geri bildirim sağlar.
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate> <input type="text" name="Topic" ng-model="Topic" required> <input type="submit" value="Submit" ng-disabled="topicForm.$invalid"> </form>
Bu kalıpla ilgili bildirilen sorunların çoğundan iki hata sorumludur:
- Double sunulması. bağlayıcı
ng-clickGönder düğmesine basıldığındang-submitFormda yer alan bu kod, olay başına bir kez olmak üzere, işleyiciyi iki kez çalıştırır. Resmi kaynak, iki işleyiciyi birleştirmenin sakıncalı olduğunu belirtiyor, bu nedenle birini seçin. - Beklenmeyen gönderimler. Form içindeki herhangi bir düğme hariç
type="button"Gönderme olayını tetikler. İptal ve sıfırlama düğmelerini açıkça işaretleyin, aksi takdirde onlar da olay işleyicisini tetikler.
Koruma altında $valid Bu bir kolaylıktır, güvenlik kontrolü değildir. Değerlerin sunucuda saklanmadan önce yeniden doğrulanması gerekir.
