ng-submit di AngularJS: Menangani Pengiriman Formulir dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

ng-submit di AngularJS mengikat fungsi controller ke event submit formulir di browser, sehingga nilai yang dimasukkan diproses di dalam controller dan halaman tidak pernah dimuat ulang melalui POST default.

  • 🔘 Peran pengarah: ng-submit mengikat ekspresi AngularJS ke peristiwa submit dari elemen formulir.
  • ☑️ Tidak ada pemuatan ulang halaman: Permintaan POST default browser akan ditekan kecuali jika formulir tersebut memiliki atribut action.
  • ✅ Contoh yang dikerjakan: Sebuah kotak teks ditambah Display() memasukkan setiap topik ke dalam array AllTopic untuk ng-repeat.
  • 🧪 Gerbang validasi: Menggabungkan `$valid` dengan `novalidate` dan `ng-disabled` akan memblokir pengiriman data yang tidak lengkap.
  • ️ Kesalahan umum: Mengikat ng-click pada tombol submit di samping ng-submit menyebabkan pengiriman ganda.
  • 📊 Catatan versi: Dukungan AngularJS berakhir pada Januari 2022; Angular modern mengirimkan permintaan melalui (ngSubmit).
Baca Selengkapnya

Direktif ng-submit di AngularJS mengikat peristiwa pengiriman formulir ke fungsi controller.

Petunjuk pengiriman AngularJS

The ng-kirim arahan di AngularJS digunakan untuk mengikat aplikasi ke acara pengiriman browser. Jadi dalam kasus AngularJS pada acara pengiriman, Anda dapat melakukan beberapa pemrosesan di dalam pengontrol itu sendiri dan kemudian menampilkan informasi yang diproses kepada pengguna.

Catatan versi: AngularJS 1.x keluar dari Dukungan Jangka Panjang pada 31 Desember 2021, dan tim pengembang framework tersebut mengkonfirmasi hal itu. Dukungan untuk AngularJS resmi berakhir. pada Januari 2022, jadi tidak ada rilis atau patch keamanan yang menyusul. Setiap langkah dan blok kode di bawah ini dipertahankan persis seperti yang tertulis, sebagai referensi historis. Pekerjaan baru termasuk dalam Angular modern, yang mengekspresikan ide yang sama seperti (ngSubmit) terikat pada FormGroup.

Cara Mengirim Formulir di AngularJS menggunakan ng-submit

Proses pengiriman informasi pada halaman web biasanya ditangani oleh event submit di browser web. Event ini biasanya digunakan untuk mengirimkan informasi yang mungkin telah dimasukkan pengguna pada halaman web ke server untuk diproses lebih lanjut seperti kredensial login, data formulir, dll. Pengiriman informasi dapat dilakukan melalui permintaan GET atau POST.

Mari kita ambil contoh pengiriman formulir Angular untuk melihat cara mengirimkan formulir di AngularJS.

Dalam contoh pengiriman formulir AngularJS, kami akan menyajikan kotak teks kepada pengguna tempat mereka dapat memasukkan topik yang ingin mereka pelajari. Akan ada tombol kirim di halaman, yang jika ditekan akan menambahkan topik ke daftar yang tidak berurutan.

Ilustrasi di bawah ini tracalur yang dimulai dari topik yang diketik di dalam kotak teks, melalui tombol Kirim, hingga item daftar yang ditambahkan di bawahnya.

Formulir AngularJS dengan kotak teks topik, tombol Kirim, dan daftar topik yang tidak berurutan sebagai hasilnya.
Mengirimkan Formulir di AngularJS menggunakan ng-submit

Contoh Pengiriman Formulir AngularJS

Sekarang, kita akan melihat contoh pengiriman formulir AngularJS dari Controller menggunakan direktif ng-submit:

<!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()">
        &nbsp;&nbsp;&nbsp;
        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 Penjelasan:

  1. Pertama, kita mendeklarasikan tag HTML formulir kita, yang akan menampung kontrol "kotak teks" dan "tombol kirim" seperti yang ditunjukkan pada contoh event pengiriman formulir Angular. Kemudian, kita menggunakan direktif AngularJS ng-submit untuk mengikat fungsi "Display()" ke formulir kita. Fungsi ini akan didefinisikan dalam controller kita dan akan dipanggil ketika formulir dikirim.
  2. Kami memiliki kontrol teks di mana pengguna akan memasukkan Topik yang ingin mereka pelajari. Ini akan terikat pada variabel bernama 'Topik' yang akan digunakan di pengontrol kami.
  3. Terdapat tombol submit normal di AngularJS yang akan diklik pengguna ketika sudah memasukkan topik yang diinginkan.
  4. Kami telah menggunakan ng-ulangi arahan untuk menampilkan item daftar topik yang dimasukkan pengguna. Direktif ng-repeat menelusuri setiap topik dalam larik 'AllTopic' dan menampilkan nama topik yang sesuai.
  5. Di dalam controller kita, kita mendeklarasikan variabel array bernama 'AllTopic.' Variabel ini akan digunakan untuk menyimpan semua topik yang dimasukkan oleh pengguna pada Langkah 2.
  6. Kami mendefinisikan kode untuk fungsi Display() kami yang akan dipanggil setiap kali pengguna mengklik tombol Kirim. Di sini kita menggunakan fungsi push array untuk menambahkan Topik yang dimasukkan oleh pengguna melalui variabel 'Topik' ke dalam array 'AllTopic.'

Jika kode contoh formulir AngularJS berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:

Tampilan output browser dari contoh AngularJS ng-submit yang menunjukkan kotak teks topik kosong dan tombol Kirim.

Untuk melihat kode yang berfungsi, pertama-tama, masukkan nama Topik seperti “Angular” seperti yang ditunjukkan di atas pada kotak teks lalu klik tombol Kirim.

Output AngularJS ng-submit setelah mengklik Kirim, dengan topik yang dimasukkan ditambahkan ke daftar.

  • Setelah tombol kirim diklik, Anda akan melihat item yang dimasukkan dalam kotak teks ditambahkan ke daftar item.
  • Hal ini dicapai dengan fungsi Display(), yang dipanggil ketika tombol kirim ditekan.
  • Fungsi Display() menambahkan teks ke variabel array yang disebut 'AllTopic.' Dan direktif ng-repeat kami menelusuri setiap nilai dalam variabel array 'AllTopic' dan menampilkannya sebagai item daftar.
Jangan lewatkan:

ng-submit vs ng-click: Mana yang Digunakan

Kedua Direktif AngularJS Dapat memanggil fungsi controller yang sama, namun mereka mendengarkan event browser yang berbeda. ng-submit duduk di atas <form> Tag ini bereaksi terhadap peristiwa submit, sehingga juga aktif ketika pengguna menekan Enter di dalam sebuah field. ng-click Terletak di atas sebuah tombol dan hanya bereaksi terhadap klik mouse atau aktivasi yang setara.

Aspek ng-kirim ng-klik
Elemen tuan rumah Tag formulir Elemen apa pun yang dapat diklik
Acara yang didengarkan kirim, termasuk tombol Enter klik saja
Browser default mengirimkan data POST. Dibatasi oleh arahan tersebut Masih menampilkan gambar dari tombol kirim.
Akses ke formulir negara bagian Membaca variabel $valid dan $invalid pada controller formulir. Tidak memiliki konteks bentuk tersendiri.
Cocok secara alami Menyerahkan data formulir ke pengontrol. Tombol bilah alat, tautan, pemicu modal

Dukungan keyboard biasanya menentukan pilihan. Sebuah bentuk yang terhubung dengan ng-click Secara otomatis mengabaikan tombol Enter, yang membuat pengguna frustrasi saat mengisi kotak login. Cadangan ng-click untuk tindakan yang bukan pengiriman formulir, seperti mengosongkan kolom atau membuka dialog.

Mengapa ng-submit Mencegah Pengiriman Data Default Browser?

Formulir HTML biasa bereaksi terhadap peristiwa pengiriman dengan menserialisasi kolom-kolomnya dan meminta browser untuk memuat halaman baru, yang kemudian akan membuang semua nilai yang tersimpan di dalamnya. $scope. itu ng-submit arahan tersebut mencegah hal itu terjadi: arahan tersebut memanggil preventDefault() untuk Anda, jadi ekspresi berjalan dan halaman saat ini tetap di tempatnya. Tidak $event argumen dan tidak diperlukan panggilan manual.

Penindasan tersebut memiliki satu syarat yang terdokumentasi. Menurut Kirim referensi, tindakan default hanya dicegah saat formulir tidak memuat action, data-action or x-action atribut. Tambahkan salah satu dari itu dan browser akan menavigasi seperti biasa setelah handler selesai, yang merupakan perilaku yang benar untuk formulir yang dirender server secara bertahap dan mengejutkan di tempat lain.

Karena arahan tersebut menelan objek peristiwa, bacalah nilai yang dikirimkan dari properti yang ng-model menulis ke dalam cakupan, atau meneruskannya secara eksplisit, seperti pada ng-submit="Display(Topic)".

Cara Memvalidasi Formulir Sebelum ng-submit Dijalankan

Contoh di atas menerima topik kosong, karena tidak ada yang memeriksa kotak teks terlebih dahulu. AngularJS membangun pengontrol formulir untuk setiap formulir bernama, dan pengontrol tersebut mengekspos flag yang dibutuhkan untuk mengatur pengiriman. Tambahkan novalidate jadi browser membiarkan gelembung HTML5-nya sendiri dimatikan dan AngularJS validasi formulir mengambil alih.

  1. Berikan formulir tersebut nameAngularJS mempublikasikan controller dengan nama tersebut pada lingkungan sekitarnya. pengawas cakupan.
  2. Add novalidate ke tag formulir sehingga validasi bawaan browser tidak mengganggu.
  3. Tandai kolom-kolom tersebut, menggunakan required, ng-minlength, ng-maxlength or ng-pattern.
  4. Lindungi petugas penanganan dengan $valid, dan teruskan pengontrol formulir agar fungsi tersebut dapat memeriksa setiap kolom secara individual.
  5. Nonaktifkan tombol dengan ng-disabled menunjuk ke $invalidyang memberikan umpan balik visual secara langsung.
<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>

Dua kesalahan menjadi penyebab sebagian besar masalah yang dilaporkan terkait pola ini:

  • Double pengajuan. Mengikat ng-click pada tombol kirim saat ng-submit Jika dijalankan pada formulir, handler akan dijalankan dua kali, sekali untuk setiap kejadian. Referensi resmi memperingatkan agar tidak menggabungkan kedua handler tersebut, jadi pilihlah salah satu.
  • Pengajuan yang tidak terduga. Tombol apa pun di dalam formulir tanpa type="button" Memicu peristiwa pengiriman. Tandai tombol batal dan atur ulang secara eksplisit, jika tidak, tombol tersebut juga akan memicu penangan.

Menjaga $valid Ini adalah fitur kemudahan, bukan kontrol keamanan. Nilai-nilai tersebut masih harus divalidasi ulang di server sebelum disimpan.

Pertanyaan Umum Demo Slot

Ya. Sebuah formulir yang berisi input atau tombol bertipe submit akan memicu event submit ketika tombol Enter ditekan di dalam sebuah field, sehingga ekspresi ng-submit berjalan tanpa memerlukan penanganan tombol tambahan.

Tidak. Hanya elemen formulir yang memicu peristiwa submit yang didengarkan oleh directive tersebut. Pindahkan ng-submit ke tag form, atau lampirkan ng-click ke elemen yang sebenarnya ingin Anda tanggapi.

ng-submit tidak meneruskan argumen apa pun. Baca properti scope yang diisi oleh ng-model, atau teruskan secara eksplisit, misalnya ng-submit=”Display(Topic)” atau ng-submit=”Display(topicForm)”.

Ya. Setiap elemen formulir mendapatkan pengontrol formulirnya sendiri, jadi berikan setiap formulir nama yang unik dan ikat penangan yang terpisah. Menggunakan satu fungsi yang sama di beberapa formulir akan menyebabkan bentrok cakupan.

Operator menembak ke arah mana pun, tetapi lapangan tanpa ng-model Variabel `$scope` tidak pernah menulis nilainya ke `$scope`, sehingga fungsi tersebut tidak dapat membacanya. Ikat setiap input yang akan Anda proses.

Kompilasi formulir dalam pengujian, atur nilai model pada cakupan, picu peristiwa pengiriman, lalu lakukan penegasan pada array atau panggilan layanan yang dihasilkan oleh handler. Karma dengan Jasmine tetap menjadi pasangan yang biasa digunakan.

Model bahasa membaca bentuk model dan draf yang dibutuhkan, atribut ng-pattern dan ng-minlength ditambah pesan yang cocok, yang mengubah banyak hal di AngularJS. validasi formulir dimasukkan ke dalam langkah peninjauan.

Kopilot GitHub Mode agen menulis ulang templat menjadi (ngSubmit) dengan FormGroup dan membuat kerangka kelas komponen, namun validator dan panggilan asinkron yang dihasilkan masih memerlukan tinjauan dan pengujian manual.

Ringkaslah postingan ini dengan: