Cara Membuat Validasi Menggunakan Form State Pada AngularJs

Validasi adalah suatu informasi yang muncul dari form. Contoh sederhana dan yang paling banyak kita jumpai yaitu validasiÂ ketika form input masih kosong atau yang artinya form input tersebut wajib diisi. Sebelumnya saya sudah pernah membahas tentang cara membuat validasi menggunakan ng-valid dan kali ini saya masih akan membahas validasi yaitu tentang Cara Membuat Validasi Menggunakan Form State Pada AngularJs.

Sebelum kita masuk ke langkah pertama tentang Cara Membuat Validasi Menggunakan Form State Pada AngularJs, saya akan menjelaskan terlebih dahulu form state. form state bisa kita definisikan sebagai properti di tag form yang disediakan oleh angularJs. Macam-macam form state pada angularJs adalah sebagai berikut ini.

$pristine : Isi Input belum di update atau modified
$dirty : Isi Input sudah di update atau modified
$invalid : Isi Input Tidak Valid
$valid : Isi Input Valid
$submitted : Form Submit

Langsung saja kita mulai untuk Membuat Validasi Menggunakan Form State Pada AngularJs. Langkah pertama kita akan buat variable $scope user dan email dalam controller untuk memberikan isi di form input yang akan di buat selanjutnya. Berikut ini adalah scriptnya.

<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
	    $scope.user = 'Shelli Ripati';
	    $scope.email = 'shelli@gmail.com';
	});
	</script>

Jika sudah kita akan membuat struktur html yang berisi input user dan email.

<!DOCTYPE html>
<html>

<head>
	<title>Cara Membuat Validasi Menggunakan Form State Pada AngularJs</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
</head>

<body>

	<h2>Cara Membuat Validasi Menggunakan Form State Pada AngularJs</h2>

	<form ng-app="myApp" ng-controller="myCtrl" name="myForm" novalidate>
		Username:
		<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 Wajib Di isi</span>
		</span>
		<br>
		Email:
		<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 Wajib Di Isi.</span>
			<span ng-show="myForm.email.$error.email">Alamat Email Salah</span>
		</span>
		<br>
		<input type="submit" value="Submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
	</form>
</body>
</html>

Untuk tampilan defaultnya akan seperti pada gambar di bawah ini ya teman-teman. Disini tidak ada error karena semua input sudah diisi semua dan format emailnya pun sama.Â

Dan untuk menampilkan validasi disini saya menggunakan span dengan memberikan ng-show=”myForm.user.$dirty && myForm.user.$invalid” dan ng-show=”myForm.user.$error.required” yang berarti akan muncul ketika tag input user kosong dan tidak valid. Kemudian pada tag email saya gunakan span juga untuk memunculkan validasinya denganÂ ng-show yang sama seperti tag input user, hanya saja ada tambahannya yaitu ng-show=”myForm.email.$error.email” akan muncul ketika yang di masukkan datanya bukan merupakan format email.

Jika ditampilkan maka akan seperti ini tampilan validasi dengan menggunakan form state pada angularjs.

Demikian artikel tentang Cara Membuat Validasi Menggunakan Form State Pada AngularJs. Semoga bermanfaat

Cara Membuat Validasi Menggunakan Form State Pada AngularJs

Kategori