Cara Membuat Validasi Dengan Ng-valid AngularJs

Validasi adalah suatu informasi yang dikeluarkan dari sebuah form input sebagai pemberitahuan kepada user atau pengguna. Dimana informasi tersebut berupa sesuatu yang error atau juga yang tidak. Sebagai salah satu contohnya mungkin teman-teman pernah menemukan sebuah validasi form ketika kita melakukan registrasi atau buat akun baru, dimana ada beberapa informasi yang dikeluarkan untuk memberi tahukan user bahwa input wajib diisi dan tidak boleh kosong. Dan validasi form akan saya bahas pada artikel yang berjudul Cara Membuat Validasi Dengan Ng-valid AngularJs.

Validasi form yang akan saya akan buat pada kesempatan kali ini adalah dengan memberikan style css untuk input yang kosong dan style css untuk input yang sudah diisi. Langkah pertama Cara Membuat Validasi Dengan Ng-valid AngularJs yaitu teman-teman buat struktur htmlnya seperti script di bawah ini.

<!DOCTYPE html>
<html>
<head>
</head>
	
<body ng-app="">

	<p>Cara Membuat Validasi Dengan Ng-valid AngularJs</p>

	<form name="myForm">
		<input name="myName" ng-model="myName" required>
	</form>

</body>
</html>

Kemudian jangan lupa cantumkan link angularjs di dalam tag head yang ada di html. Teman-teman bisa dapatkan link cdnnya di website resminya angularjs.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

Dan langkah terakhir kita akan membuat style css dengan menggunakan .ng-valid untuk input yang sudah diisi dan .ng-invalid untuk input yang belum diisi dan masih kosong. Dimana pada angularjs sudah disediakan beberapa kelas yang ada di form dan tag input yang bisa kita manfaatkan. Berikut ini adalah style css untuk membuat tanda input kosong dan tidak.

<style>
		input.ng-invalid {
		    background-color:pink;
		    border:1px solid red;
		}
		input.ng-valid {
		    background-color:lightgreen;
		    border:1px solid green;
		}
</style>

Jika diperhatikan maka ketika input kosong dia akan memiliki background pink dan border warna merah yang berarti memberitahukan kepada user atau pengguna bahwa input harus diisi seperti pada gambar di bawah ini.

Dan jika input tidak kosong maka background akan berubah menjadi warna hijau muda dan border berwarna hijau seperti pada gambar di bawah ini.

Demikian artikle tentang Cara Membuat Validasi Dengan Ng-valid AngularJs. Semoga dapat bermanfaat dan selamat mencoba.