Slider Widget

Ads Here

Monday, July 20, 2020

AngularJS : Form dan Validasi oleh - seomedia.xyz

isNumber? {{ isnumber }}
isString? {{ isstring }}
isObject? {{ isobject }}
isArray? {{ isarray }}
isFunction? {{ isfuntion }}
isDefined? {{ isdefined }}
isUndefined? {{ isundefined }}

Jika ingin menggunakan validasi untuk form, maka kita akan mengenal beberapa state :

  • ng-untouched â€" State dimana form component belum “disentuh” sama sekali atau sudah.
  • ng-touched â€" State dimana form component telah “disentuh” atau belum.
  • ng-pristine â€" State dimana form component telah di modif isinya atau belum. Kalau statusnya pristine true, maka sudah pasti touched Tetapi belum tentu sebaliknya.
  • ng-dirty â€" State dimana form component telah di modif atau belum.
  • ng-valid â€" State dimana form component telah valid atau tidak.
  • ng-invalid â€" State dimana form component tidak valid atau iya.

Untuk state valid dan invalid, penentuannya sesuai dengan attribute/type pada component (HTML5 version). Ada beberapa attribute yang menjadi patokan apakah form tersebut valid atau tidak, diantaranya :

email | max | maxlength | min| minlength | number | pattern | required | url | date | datetimelocal | time | week | month

Untuk referensi, cek aturan penggunaan attribute/type diatas pada halaman ini : https://www.w3schools.com/html/html_form_input_types.asp

Name:
Gender: Male Female
Age:
Country:
Address :
Blog :

{{ user | json }}

Error Messages :

Name can't be empty
Age can't be empty
Gender must be selected
Country must be selected
Address must be filled
Not a url format

Error messages akan muncul ketika kondisi di dalam ng-show bernilai true.

Untuk mengambil state dari sebuah form component, bisa bisa mengakses attribute name-nya. Bukan mengakses modelnya. Misalnya untuk nameInput, bisa diakses dengan mengakses name form terlebih dahulu [dot] nameInput. Lalu, kondisi $dirty sengaja ditambahkan agar errormessages tidak muncul langsung ketika form di load tetapi akan muncul jika sudah di modif sebelumnya.

Seperti yang saya jelaskan diatas, state valid dan invalid ditentukan oleh attribute/input type HTML5. Contohnya untuk blogInput, kondisi error akan muncul karena type inputan untuk blogInput adalah url (new HTML5 features).

Lalu, bagaimana jika ingin validasi umur harus diatas 17 misalnya. Sebenarnya , kita juga bisa mengakses value dari modelnya lalu menambakan compare operator layaknya if seperti biasa.

Age must be older than 17

Note : Directive ng-show/ng-hide/ng-if/ng-disabled bisa diisi dengan kondisi if seperti biasa. Jadi boleh ditambahkan compare operator, ataupun negasi (!).

angular.copy() merupakan salah satu build in function dari AngularJS untuk menduplikasi isi object ke object lain. Perlu diketahui, kalau seandainya kita langsung mengassignnya menggunakan tanda = maka kedua object tersebut akan sama value dan referencenya. Ketika object a diubah, maka object b akan ikut berubah. So, gunakan angular.copy() untuk mengcopy isinya saja tanpa menyamakan referencenya.

Full Code

      	AngularJS - Tutorial  	      Age must be older than 17      	
Name can't be empty
Age can't be empty
Gender must be selected
Country must be selected
Address must be filled
Not a url format
Name:
Gender: Male Female
Age:
Country:
Address :
Blog :

{{ user | json }}

No comments:

Post a Comment