ຄຳສັ່ງ form AngularJS

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

ການດັດແປງ AngularJS <form> ພຶດຕິກຳມາດຕະການສະຖານະພາບບັນດາສັບພາບ.

ຟອມບັນທຶກໃນຄວາມສະຖານະ AngularJS ໄດ້ມີບາງລະບຽບ. ບັນດາລະບຽບນີ້ອະທິບາຍສະຖານະປະຈຳຟອມບັນທຶກ.

ຟອມບັນທຶກທີ່ຢູ່ໃນຄວາມສະຖານະຂອງຕ່າງໆ:

  • $pristine ບໍ່ໄດ້ດັດແປງຂັ້ນໃດໃນຟອມບັນທຶກ
  • $dirty ບັນດາບົດມູນຄ່າແມ່ນໄດ້ຖືກດັດແປງ
  • $invalid ຂັ້ນຕອນຟອມບໍ່ມີຄວາມສາມາດ
  • $valid ຂັ້ນຕອນຟອມມີຄວາມສາມາດ
  • $subscribed ຟອມບັນທຶກຈະຖືກສົ່ງລົງ

ຄວາມມູນຄ່າຂອງແຕ່ລະສະຖານະສະຖານະການຢູ່ເປັນຄວາມຄິດຕາມຂະໜາດ: true ຫຼື false.

ຖ້າບໍ່ມີລະບຽບ action ທີ່ກຳນົດ ຟອມບັນທຶກ AngularJS ຈະຢຸດການດຳເນີນການສະຖານະຫຼັກ ເຊິ່ງແມ່ນການສົ່ງຟອມບັນທຶກໄປຫາສະຖານນີ.

ຄວາມນັບຖື

ຕົວຢ່າງ 1

ພຽງແຕ່ເວລາທີ່ຂອບເຂດບັນທຶກທີ່ຕ້ອງການບໍ່ມີຄວາມລັງງານ ສະຖານະ "true" ຂອງຟອມບັນທຶກຈະບໍ່ຖືກພິຈາລະນາ:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>ສະຖານະສະຖານະຂອງຟອມບັນທຶກຢືນຢັນ:</p>
<h1>{{myForm.$valid}}</h1>

亲自试一试

ຕົວຢ່າງ 2

ນຳໃຊ້ຮູບແບບໃຫ້ຟອມບັນທຶກທີ່ບໍ່ໄດ້ດັດແປງ(ແບບເລີ່ມຕົ້ນ) ແລະ ຟອມບັນທຶກທີ່ໄດ້ດັດແປງ:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}

亲自试一试

语法

通过使用 name 属性的值来引用表单。

CSS 类

AngularJS 应用程序内的表单被赋予了某些类。这些类可用于根据其状态设置表单样式。

ໄດ້ເພີ່ມເຫຼົ່ານັ້ນໃຫ້ມີຊັກຊວນ:

  • ng-pristine ບໍ່ມີບົດມູນຄ່າໃດທີ່ຍັງບໍ່ຖືກດັດແປງ
  • ng-dirty ບັນດາບົດມູນຄ່າແມ່ນໄດ້ຖືກດັດແປງ
  • ng-valid ຂັ້ນຕອນຟອມມີຄວາມສາມາດ
  • ng-invalid ຂັ້ນຕອນຟອມບໍ່ມີຄວາມສາມາດ
  • ng-valid-key ການກວດກາພຽງແຕ່ຄຳສັ່ງຫຼັກຫຼີກຄັ້ງດຽວ. ຕົວຢ່າງ:ng-valid-requiredມັນຈະມີຜົນດີຫຼາຍຖ້າມີຫຼາຍຫຼັກຫຼີກທີ່ຕ້ອງການການກວດກາ
  • ng-invalid-key ຕົວຢ່າງ:ng-invalid-required

ຖ້າມູນຄ່າທີ່ຕາມການສະແດງຂອງປະເພດ falseຖ້າເປັນການກວດການຫຼາຍຫຼັກຫຼີກ, ຊັກຫານັ້ນຈະຖືກລຶບອອກ.