textareaคำสั่งAngularJS
ตัวอย่าง
พื้นที่ข้อความที่มีการผูกข้อมูล:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
ความหมายและการใช้งาน
AngularJS ปรับเปลี่ยนพฤติกรรมเริ่มต้นของ<textarea>องค์ประกอบ แต่เฉพาะในกรณีที่ng-modelแอตทริบิวต์มีอยู่
พวกเขาจัดให้มีการเชื่อมโยงข้อมูล ซึ่งหมายความว่าเป็นส่วนหนึ่งของโมเดล AngularJS และสามารถอ้างอิงและปรับปรุง ทั้งในฟังก์ชัน AngularJS และใน DOM
พวกเขาให้การตรวจสอบ ตัวอย่าง: <textarea>องค์ประกอบที่มีrequiredแอตทริบิวต์ มีการ$validตั้งค่าสถานะไว้
falseตราบเท่าที่ยังว่างอยู่
พวกเขายังให้การควบคุมของรัฐ AngularJS ถือสถานะปัจจุบันขององค์ประกอบ textarea ทั้งหมด
ฟิลด์ Textarea มีสถานะดังต่อไปนี้:
$untouchedยังไม่ได้แตะสนาม$touchedสัมผัสสนามแล้ว$pristineฟิลด์ยังไม่ได้แก้ไข$dirtyฟิลด์ได้รับการแก้ไข$invalidเนื้อหาของฟิลด์ไม่ถูกต้อง$validเนื้อหาของฟิลด์ถูกต้อง
ค่าของแต่ละสถานะแสดงถึงค่าบูลีน และมีค่าtrue
เท่ากับfalse.
ไวยากรณ์
<textarea ng-model="name"></textarea>
อิลิเมนต์ Textarea ถูกอ้างถึงโดยใช้ค่าของng-modelแอททริบิวต์
CSS Classes
<textarea>องค์ประกอบภายในแอปพลิเคชัน 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เป็น
ตัวอย่าง
ใช้สไตล์สำหรับองค์ประกอบ textarea ที่ถูกต้องและไม่ถูกต้อง โดยใช้ CSS มาตรฐาน:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>