`form`คำสั่งAngularJS

"สถานะที่ถูกต้อง" ของแบบฟอร์มนี้จะไม่ถือว่าเป็น "จริง" ตราบใดที่ช่องป้อนข้อมูลที่จำเป็นว่างเปล่า:

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

<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>

ความหมายและการใช้งาน

AngularJS ปรับเปลี่ยนการทำงานเริ่มต้นของ<form>องค์ประกอบ

แบบฟอร์มภายในแอปพลิเคชัน AngularJS จะได้รับคุณสมบัติบางอย่าง คุณสมบัติเหล่านี้อธิบายสถานะปัจจุบันของแบบฟอร์ม

แบบฟอร์มมีสถานะดังต่อไปนี้:

ค่าของแต่ละสถานะแสดงถึงค่าบูลีน และเป็นอย่างใดอย่างหนึ่งtrue หรือfalse

แบบฟอร์มใน AngularJS ป้องกันการดำเนินการเริ่มต้น ซึ่งกำลังส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ หากไม่มีการระบุแอตทริบิวต์การกระทำ

แบบฟอร์มถูกอ้างถึงโดยใช้ค่าของแอตทริบิวต์ชื่อ

แบบฟอร์มภายในแอปพลิเคชัน AngularJS จะ ได้รับบางคลาส คลาสเหล่านี้สามารถใช้จัดรูปแบบแบบฟอร์มตามสถานะได้

เพิ่มคลาสต่อไปนี้:

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

คลาสจะถูกลบออกหากค่าที่แสดงfalseเป็น

ใช้สไตล์สำหรับแบบฟอร์มที่ไม่ได้แก้ไข (เดิม) และสำหรับแบบฟอร์มที่แก้ไขแล้ว:

<style>

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

</style>