AngularJS - Borang

Hai, para pengguna yang bersemangat! Hari ini, kita akan melihat dunia yang menarik bagi AngularJS borang. Sebagai guru sains komputer di lingkungan tetangga anda, saya di sini untuk menghidangkan anda dalam perjalanan ini, langkah demi langkah. Jangan bimbang jika anda baru dalam bidang programming - kita akan mulakan dari asas dan meningkatkan ke arah atas. Jadi, ambil secangkir kopi (atau minuman kegemaran anda), dan mari kita mula!

Mengerti Borang AngularJS

Sebelum kita melompat ke detil, mari berbicara mengapa borang sangat penting dalam pengembangan web. Bayangkan anda memesan pizza secara dalam talian - anda perlu memasukkan nama, alamat, dan keutamaan pizza anda, betul? Itu adalah di mana borang memainkan peranan! Mereka adalah jambatan antara pengguna dan aplikasi web, membolehkan input data dan interaksi.

AngularJS, framework superhero kita, membuat penanganan borang menjadi mudah. Ia menyediakan alat kuat untuk mencipta, mengurus, dan mengesahkan borang dengan mudah. Mari kita jelajahi ciri-ciri ini satu demi satu.

Peristiwa dalam Borang AngularJS

Peristiwa adalah seperti denyut jantung aplikasi web anda. Mereka adalah tindakan yang berlaku ketika pengguna berinteraksi dengan borang anda - mengklik butang, mengetik dalam kotak teks, atau memilih opsyen dari menu dropdown.

Peristiwa Borang Umum

Berikut adalah jadual peristiwa borang umum dalam AngularJS:

Peristiwa	Keterangan
ng-submit	Dipicu ketika borang diserahkan
ng-click	Dipicu ketika elemen diklik
ng-change	Dipicu ketika nilai input berubah
ng-focus	Dipicu ketika elemen menerima fokus
ng-blur	Dipicu ketika elemen kehilangan fokus

Mari kita lihat contoh mudah tentang bagaimana menggunakan peristiwa ng-submit:

<form ng-submit="submitForm()">
<input type="text" ng-model="user.name">
<button type="submit">Serahkan</button>
</form>

Dalam contoh ini, ketika borang diserahkan, ia akan memanggil fungsi submitForm() dalam pengawal AngularJS anda. Fungsi ini kemudiannya boleh mengurus data borang seperti yang diperlukan.

Kuasa ng-click

Sekarang, mari kita fokus pada salah satu peristiwa yang paling kerap digunakan: ng-click. Directive kecil ini adalah seperti tongkat sihir yang membuat elemen interaktif.

Berikut adalah contoh mudah:

<button ng-click="sayHello()">Ucapan Hello</button>

$scope.sayHello = function() {
alert("Hello, AngularJS!");
};

Ketika anda mengklik butang ini, ia akan memanggil fungsi sayHello(), yang akan menunjukkan peringatan dengan salam ramah. Itu saja mudah!

Tetapi ng-click boleh melakukan banyak hal lain. Mari kita lihat contoh yang lebih praktikal:

<div ng-controller="CounterController">
<p>Count: {{count}}</p>
<button ng-click="increment()">+</button>
<button ng-click="decrement()">-</button>
</div>

app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});

Dalam contoh ini, kita telah mencipta penghitung mudah. Setiap kali anda mengklik butang "+", ia meningkatkan bilangan, dan setiap kali anda mengklik butang "-", ia mengurangkan bilangan. Ini menunjukkan bagaimana ng-click boleh digunakan untuk mengemas kini data secara real-time.

Validasi Data: Menyusun Hal-Hal Rapi dan Bersih

Sekarang kita tahu bagaimana mengurus peristiwa, mari kita berbicara tentang validasi data. Itu seperti memiliki penjaga di club - kita inginpastikan hanya data yang betul yang memasuki!

AngularJS menyediakan ciri validasi borang built-in. Mari kita lihat contoh:

<form name="myForm" ng-submit="submitForm()" novalidate>
<input type="text" name="userName" ng-model="user.name" required>
<span ng-show="myForm.userName.$touched && myForm.userName.$invalid">
Sila masukkan nama anda.
</span>

<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="myForm.userEmail.$touched && myForm.userEmail.$invalid">
Sila masukkan alamat email yang sah.
</span>

<button type="submit" ng-disabled="myForm.$invalid">Serahkan</button>
</form>

Dalam contoh ini, kita menggunakan directive validasi built-in AngularJS:

• required: Mengjadikan bidang ini wajib
• ng-show: Menunjukkan mesej kesalahan jika syarat dipenuhi
• $touched: Memeriksa jika bidang telah diinteraksi
• $invalid: Memeriksa jika nilai bidang adalah tidak sah
• ng-disabled: Menyembunyikan butang serahkan jika borang adalah tidak sah

Dengan cara ini, kita memastikan pengguna menyediakan data sah sebelum mengirimkan borang. Itu seperti memiliki asisten yang membantu memeriksa segala-galanya!

Menggabungkan Segala-Galanya: Contoh Lengkap

Sekarang, mari kita gabungkan segala-galanya ke dalam contoh lengkap. Kita akan mencipta borang pendaftaran mudah dengan validasi dan penanganan peristiwa.

<div ng-controller="RegistrationController">
<form name="registrationForm" ng-submit="submitForm()" novalidate>
<label>Nama:</label>
<input type="text" name="userName" ng-model="user.name" required>
<span ng-show="registrationForm.userName.$touched && registrationForm.userName.$invalid">
Sila masukkan nama anda.
</span>

<label>Email:</label>
<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="registrationForm.userEmail.$touched && registrationForm.userEmail.$invalid">
Sila masukkan alamat email yang sah.
</span>

<label>Umur:</label>
<input type="number" name="userAge" ng-model="user.age" min="18" required>
<span ng-show="registrationForm.userAge.$touched && registrationForm.userAge.$invalid">
Anda mestilah sekurang-kurangnya 18 tahun.
</span>

<button type="submit" ng-disabled="registrationForm.$invalid">Daftar</button>
</form>

<div ng-show="formSubmitted">
<h2>Selamat Datang, {{user.name}}!</h2>
<p>Alamat email anda adalah: {{user.email}}</p>
<p>Umur anda adalah: {{user.age}}</p>
</div>
</div>

app.controller('RegistrationController', function($scope) {
$scope.user = {};
$scope.formSubmitted = false;

$scope.submitForm = function() {
if ($scope.registrationForm.$valid) {
$scope.formSubmitted = true;
console.log('Borang diserahkan:', $scope.user);
} else {
alert('Sila betulkan kesalahan dalam borang.');
}
};
});

Output dan Apa yang Berlaku di Belakang Payung

Ketika anda menjalankan kod ini, anda akan melihat borang dengan tiga ruangan: Nama, Email, dan Umur. Dalam interaksi dengan borang, anda akan kata:

1. Mesej kesalahan muncul jika anda sentuh bidang dan tinggalkannya kosong atau memasukkan data yang tidak sah.
2. Butang "Daftar" kekal dimatikan sehingga semua bidang adalah sah.
3. Ketika anda berjaya mengirimkan borang, mesej selamat datang muncul dengan maklumat yang anda masukkan.

Di belakang layar, AngularJS bekerja kesana-mari:

• Directive ng-model membind input bidang ke properti dalam $scope.user object.
• Directive validasi (required, type="email", min="18") memastikan integriti data.
• Directive ng-show menunjukkan mesej kesalahan secara conditionally.
• Directive ng-disabled menghalang penghantaran borang jika data adalah tidak sah.
• Directive ng-submit mengurus penghantaran borang, memanggil fungsi submitForm().

Dan itu saja! Anda telah mencipta borang sah sepenuhnya menggunakan AngularJS. Ingat, latihan membuat perfect, jadi jangan takut untuk mencuba elemen borang dan rule validasi yang berbeza.

Sekarang, saya berharap anda merasa lebih yakin tentang kerja dengan borang dalam AngularJS. Ingat, setiap pengembang hebat pernah menjadi pemula, jadi terus latih dan jelajah. Sebelum anda tahu, anda akan dapat membina aplikasi web interaktif kompleks dengan mudah!

Selamat coding, para ahli teknologi masa depan!

Credits: Image by storyset