สั่งงาน form ของ AngularJS

คู่มืออ้างอิง AngularJS

การระบุและการใช้งาน

การแก้ไข AngularJS <form> การทำงานปกติขององค์ประกอบ

ฟอร์มในโปรแกรม AngularJS มีบางคุณสมบัติบางอย่าง คุณสมบัติเหล่านี้บรรยายสถานะปัจจุบันของฟอร์ม

ฟอร์มมีสถานะต่อไปนี้：

  • $pristine ยังไม่ได้แก้ไขใดๆ ของฟิลด์
  • $dirty มีฟิลด์หนึ่งหรือหลายฟิลด์ที่ถูกแก้ไข
  • $invalid เนื้อหาฟอร์มไม่ถูกต้อง
  • $valid เนื้อหาฟอร์มถูกต้อง
  • $subscribed ฟอร์มได้ถูกส่ง

ค่าของแต่ละสถานะนี้เป็นค่าบูลทรูท (Boolean) คือ true หรือ false。

ถ้าไม่ได้กำหนดค่าที่แสดงการดำเนินงาน action ฟอร์มใน AngularJS จะหยุดการทำงานปกติ คือการส่งฟอร์มไปยังเซิร์ฟเวอร์。

ตัวอย่าง

ตัวอย่าง 1

เมื่อฟิลด์ข้อมูลที่ต้องใช้ว่างเปล่า สถานะ "true" ของฟอร์มนี้จะไม่ถือว่าเป็น "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;
}
</style>

ลองทดสอบด้วยตัวเอง

การใช้งาน

<form name="formname</form>

ด้วยการใช้ name ค่าของคุณสมบัติเพื่ออ้างอิงฟอร์ม

รูปแบบ CSS

ฟอร์มด้านในโปรแกรม AngularJS มีรูปแบบบางชั้น ชั้นเหล่านี้สามารถใช้เพื่อตั้งรูปแบบฟอร์มตามสถานะ

เพิ่มรูปแบบต่อไปนี้

  • ng-pristine ไม่มีฟิลด์ที่ยังไม่ถูกแก้ไข
  • ng-dirty มีฟิลด์หนึ่งหรือหลายฟิลด์ที่ถูกแก้ไข
  • ng-valid เนื้อหาฟอร์มถูกต้อง
  • ng-invalid เนื้อหาฟอร์มไม่ถูกต้อง
  • ng-valid-key ตรวจสอบแต่ละกุญแจทุกครั้ง ตัวอย่างng-valid-requiredมีประโยชน์มากเมื่อจำเป็นต้องตรวจสอบมากกว่าหนึ่งสิ่ง
  • ng-invalid-key ตัวอย่างng-invalid-required

ถ้าค่าที่แสดงโดยชั้นเป็น falseถ้ามีการลบประเภทเหล่านี้

คู่มืออ้างอิง AngularJS