คำสั่ง textarea ของ AngularJS

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

การกำหนดและการใช้งาน

AngularJS จะเปลี่ยน <textarea> การปฏิบัติตามนิติบัญญัติขององค์ประกอบ ng-model มีอาทิตย์นี้

เนื่องจากมีการผนึกข้อมูล นั่นหมายความว่าเป็นส่วนหนึ่งของโมเดล AngularJS และสามารถอ้านอิงและปรับปรุงในฟังก์ชัน AngularJS และ DOM

เนื่องจากมีการให้ความสำคัญ required ของอาทิตย์ <textarea> องค์ประกอบ $valid สถานะจะถูกตั้งเป็น false.

นอกจากนี้ยังมีการควบคุมสถานะ AngularJS จะบันทึกสถานะปัจจุบันขององค์ประกอบข้อความทั้งหมด

ฟิลด์ข้อความมีสถานะต่อไปนี้:

  • $untouched ฟิลด์นี้ยังไม่ถูกสัมผัส
  • $touched ฟิลด์นี้ถูกสัมผัส
  • $pristine ช่องนี้ยังไม่ถูกแก้ไข
  • $dirty ช่องนี้ถูกแก้ไข
  • $invalid เนื้อหาของช่องสำหรับบันทึกผิดพลาด
  • $valid เนื้อหาของช่องสำหรับบันทึกถูกต้อง

ค่าของแต่ละสถานะเป็นค่าบูลเลียน ใช้เป็นจริงหรือเท็จ

ตัวอย่าง

textarea ที่มีการผนึกข้อมูล

<textarea ng-model="myTextarea"></textarea>
<p>ค่าของฟิลด์ข้อความจาก textarea คือ：</p>
<h1>{{myTextarea}}</h1>

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

ความเข้าใจของภาษาเทคนิค

<textarea ng-model="name"></textarea>

ด้วยการใช้ ng-model ค่าของอาทิตย์ที่ใช้เรียกองค์ประกอบข้อความ

คลาส CSS

ในงานใช้งาน AngularJS <textarea> องค์ประกอบถูกกำหนดคลาสบางตัว คลาสเหล่านี้สามารถใช้ตั้งรูปแบบสำหรับองค์ประกอบของข้อความ

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

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

หากค่าที่คลาสนำเสนอเป็น falseถ้ามีคลาสเหล่านี้จะถูกลบออก

ตัวอย่าง

ใช้ CSSมาตรฐานเพื่อใช้งานสไตล์สำหรับองค์ประกอบข้อความที่มีความถูกต้องและผิดพลาด:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

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

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