Validasi Formulir AngularJS
AngularJS dapat memvalidasi data input.
Validasi Formulir
AngularJS menawarkan validasi formulir sisi klien.
AngularJS memantau status formulir dan bidang input (input, textarea, pilih), dan memungkinkan Anda memberi tahu pengguna tentang status saat ini.
AngularJS juga menyimpan informasi tentang apakah mereka telah disentuh, atau dimodifikasi, atau tidak.
Anda dapat menggunakan atribut HTML5 standar untuk memvalidasi input, atau Anda dapat membuat fungsi validasi sendiri.
Validasi sisi klien tidak dapat sendirian mengamankan input pengguna. Validasi sisi server juga diperlukan.
Diperlukan
Gunakan atribut HTML5 requireduntuk menentukan bahwa bidang input harus diisi:
Contoh
Bidang masukan wajib diisi:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Surel
Gunakan jenis HTML5 emailuntuk menentukan bahwa nilainya harus berupa email:
Contoh
Kolom input harus berupa email:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Status Formulir dan Status Masukan
AngularJS terus memperbarui status formulir dan bidang input.
Bidang input memiliki status berikut:
$untouchedLapangan belum tersentuh$touchedLapangan telah tersentuh$pristineBidang belum diubah$dirtyBidang telah dimodifikasi$invalidKonten bidang tidak valid$validKonten bidang valid
Mereka semua adalah properti dari bidang input, dan merupakan salah satu true
atau false.
Formulir memiliki status berikut:
$pristineBelum ada kolom yang diubah$dirtySatu atau lebih telah dimodifikasi$invalidIsi formulir tidak valid$validIsi formulir valid$submittedFormulir diserahkan
Mereka semua adalah properti dari bentuk, dan adalah salah satu true
atau false.
Anda dapat menggunakan status ini untuk menampilkan pesan yang berarti kepada pengguna. Contoh, jika sebuah bidang diperlukan, dan pengguna membiarkannya kosong, Anda harus memberikan peringatan kepada pengguna:
Contoh
Tampilkan pesan kesalahan jika bidang telah disentuh DAN kosong:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
Kelas CSS
AngularJS menambahkan kelas CSS ke formulir dan bidang input tergantung pada statusnya.
Kelas berikut ditambahkan ke, atau dihapus dari, bidang input:
ng-untouchedLapangan belum tersentuhng-touchedLapangan telah tersentuhng-pristineBidang belum diubahng-dirtyBidang telah dimodifikasing-validKonten bidang validng-invalidKonten bidang tidak validng-valid-keySatu kunci untuk setiap validasi. Contoh:ng-valid-required, berguna bila ada lebih dari satu hal yang harus divalidasing-invalid-keyContoh:ng-invalid-required
Kelas berikut ditambahkan ke, atau dihapus dari, formulir:
ng-pristineTidak ada bidang yang belum diubahng-dirtySatu atau lebih bidang telah dimodifikasing-validIsi formulir validng-invalidIsi formulir tidak validng-valid-keySatu kunci untuk setiap validasi. Contoh:ng-valid-required, berguna bila ada lebih dari satu hal yang harus divalidasing-invalid-keyContoh:ng-invalid-required
Kelas dihapus jika nilai yang mereka wakili adalah false.
Tambahkan gaya untuk kelas-kelas ini untuk memberikan aplikasi Anda antarmuka pengguna yang lebih baik dan lebih intuitif.
Contoh
Terapkan gaya, menggunakan CSS standar:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Bentuk juga dapat ditata:
Contoh
Terapkan gaya untuk formulir yang tidak dimodifikasi (asli), dan untuk formulir yang dimodifikasi:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Validasi Kustom
Untuk membuat fungsi validasi Anda sendiri sedikit lebih rumit; Anda harus menambahkan arahan baru ke aplikasi Anda, dan menangani validasi di dalam suatu fungsi dengan argumen tertentu yang ditentukan.
Contoh
Buat arahan Anda sendiri, yang berisi fungsi validasi khusus, dan rujuk dengan menggunakan my-directive.
Bidang hanya akan valid jika nilainya berisi karakter "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
Contoh Dijelaskan:
Dalam HTML, direktif baru akan dirujuk dengan menggunakan atribut
my-directive.
Dalam JavaScript kita mulai dengan menambahkan direktif baru bernama myDirective.
Ingat, saat memberi nama direktif, Anda harus menggunakan nama camel case,
myDirective, tetapi saat menjalankannya, Anda harus menggunakan -nama terpisah,
my-directive.
Kemudian, kembalikan objek yang Anda tentukan yang kami butuhkan ngModel, yaitu ngModelController.
Buat fungsi penautan yang mengambil beberapa argumen, di mana argumen keempat, mCtrl, adalah ngModelController,
Kemudian tentukan sebuah fungsi, dalam hal ini bernama myValidation, yang mengambil satu argumen, argumen ini adalah nilai dari elemen input.
Uji apakah nilainya mengandung huruf "e", dan atur validitas pengontrol model ke salah satu trueatau false.
Terakhir, mCtrl.$parsers.push(myValidation);akan menambahkan
myValidationfungsi ke array fungsi lain, yang akan dieksekusi setiap kali nilai input berubah.
Contoh Validasi
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user"
required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username
is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
Atribut formulir HTML novalidate digunakan untuk menonaktifkan validasi browser default.
Contoh Dijelaskan
Arahan AngularJS ng-model mengikat elemen input ke model.
Objek model memiliki dua properti: pengguna dan email .
Karena ng-show , rentang dengan color:red hanya ditampilkan ketika pengguna atau email adalah $dirty dan $invalid .