AngularJS Form Validation
AngularJS menyediakan sejumlah cara untuk validasi formulir. Berikut adalah pendekatan yang umum digunakan dalam validasi formulir AngularJS:
1. Validasi Bawaan:
AngularJS memiliki sejumlah directive bawaan untuk validasi, seperti required, ng-minlength, ng-maxlength, ng-pattern, dll.
Contoh:
htmlCopy code
<form name="myForm">
<input type="text" name="email" ng-model="userData.email" required>
<span ng-show="myForm.email.$error.required">Email diperlukan</span>
</form>
2. State Form:
AngularJS menyediakan properti-properti seperti $dirty, $pristine, $valid, $invalid, dll., yang memungkinkan Anda mengetahui status dan validitas formulir.
Contoh:
htmlCopy code
<form name="myForm">
<input type="text" name="username" ng-model="userData.username" required>
<span ng-show="myForm.username.$dirty && myForm.username.$error.required">Username diperlukan</span>
</form>
3. Custom Validation:
Anda dapat membuat validasi kustom menggunakan fungsi di kontroler AngularJS dan menambahkannya ke formulir menggunakan $validators atau $asyncValidators.
Contoh:
javascriptCopy code
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.checkLength = function(value) {
return value && value.length > 5;
};
});
htmlCopy code
<form name="myForm">
<input type="text" name="customField" ng-model="userData.customField" ng-model-options="{ updateOn: 'blur' }"
ng-pattern="/^\d+$/">
<span ng-show="myForm.customField.$error.pattern">Harus berisi angka</span>
<span ng-show="!checkLength(userData.customField)">Minimal 6 karakter</span>
</form>
4. Menampilkan Pesan Error:
Pesan-pesan error dapat ditampilkan atau disembunyikan berdasarkan status validasi menggunakan directive ng-show atau ng-if.
5. Menangani Submit:
Pastikan Anda menangani pengiriman formulir (ng-submit) dengan memeriksa apakah formulir valid sebelum pengiriman.
Contoh:
htmlCopy code
<form name="myForm" ng-submit="submitForm()" novalidate>
<button type="submit" ng-disabled="myForm.$invalid">Kirim</button>
</form>
Ini adalah beberapa cara umum untuk melakukan validasi formulir di AngularJS. Dengan menggunakan directive bawaan, properti form state, validasi kustom, dan penanganan pengiriman formulir dengan benar, Anda dapat membuat formulir yang responsif dan aman di aplikasi web AngularJS Anda.
