AngularJS - ความแตกต่างระหว่างสิ่งที่เก่าแก่ / สกปรกและสัมผัส / แตะต้อง

158

คู่มือนักพัฒนา AngularJS - แบบฟอร์มบอกว่ามีหลายรูปแบบและคำสั่งเกี่ยวกับรูปแบบและเขตข้อมูล สำหรับแต่ละคลาส CSS:

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched

ความแตกต่างระหว่างpristine/dirtyและtouched/untouchedคืออะไร

angularjs

— Luis Masuelli
แหล่งที่มา

3

ตอนนี้อยู่ในเอกสารที่คุณเชื่อมโยงภายใต้หัวข้อ "การใช้คลาส CSS"

— Bernhard Hofmann

1

คุณพูดถูก :) แม้ว่าดูเหมือนว่าจะเป็นเรื่องใหม่ (ควบคู่ไปกับคลาสใหม่ที่กำหนดไว้)

— Luis Masuelli

220

คู่มือผู้พัฒนา AngularJS - CSS คลาสที่ใช้โดย AngularJS

@property {boolean} $ ไม่ถูกแตะต้อง True ถ้าการควบคุมยังไม่หายไป

@property {boolean} $ แตะจริงถ้าการควบคุมเสียโฟกัส

@property {boolean} $ pristine จริงถ้าผู้ใช้ไม่ได้มีปฏิสัมพันธ์กับการควบคุมเลย

@property {boolean} $ สกปรกจริงถ้าผู้ใช้โต้ตอบกับตัวควบคุมแล้ว

— Yuriy Rozhovetskiy
แหล่งที่มา

89

$pristine/ แจ้ง$dirtyให้คุณทราบว่าผู้ใช้เปลี่ยนแปลงอะไรจริงๆ หรือไม่ในขณะที่$touched/ $untouchedบอกให้คุณทราบว่าผู้ใช้เพิ่งเข้ามาเยี่ยมชมหรือไม่

สิ่งนี้มีประโยชน์มากสำหรับการตรวจสอบความถูกต้อง เหตุผล$dirtyก็คือเพื่อหลีกเลี่ยงการแสดงคำตอบการตรวจสอบความถูกต้องจนกว่าผู้ใช้จะได้เยี่ยมชมการควบคุมบางอย่าง แต่โดยการใช้$dirtyพร็อพเพอร์ตี้ผู้ใช้จะไม่ได้รับข้อเสนอแนะการตรวจสอบความถูกต้องจนกว่าพวกเขาจะเปลี่ยนแปลงค่าจริง ดังนั้น$invalidเขตข้อมูลจะไม่แสดงพรอมต์ผู้ใช้หากผู้ใช้ไม่เปลี่ยน / โต้ตอบกับค่า หากผู้ใช้เพิกเฉยต่อฟิลด์ที่จำเป็นต้องมีทุกอย่างดูเรียบร้อย

ด้วย Angular 1.3 และng-touchedตอนนี้คุณสามารถตั้งค่าสไตล์เฉพาะบนตัวควบคุมได้ทันทีที่ผู้ใช้เบลอไม่ว่าพวกเขาจะแก้ไขค่าจริงหรือไม่

นี่คือCodePenที่แสดงความแตกต่างในพฤติกรรม

— XML
แหล่งที่มา

ฉันกำลังมองหาวิธีล้างข้อผิดพลาดในการตรวจสอบความถูกต้องของแบบฟอร์ม รูปแบบ $ setPristine ไม่ได้ทำ ฉันเห็นแบบฟอร์มการแนะนำของผู้อื่นแล้ว $ setUntouched แต่ดูเหมือนว่านี่จะไม่สามารถใช้ได้ในเชิงมุม 1.3 19 เบต้าซึ่งเป็นรุ่นที่ฉันกำลังใช้อยู่ ฉันสามารถเรียก form.field_name ได้ $ setUntouched แต่การทำเช่นนั้นสำหรับทุกสาขาเป็นภาระมีวิธีที่ดีกว่าไหม

— ต. เร็กซ์

$setPristine$dirtyก็ทำให้แบบฟอร์มยกเลิก form.setValidity()ฉันคิดว่าคุณอาจต้องการ ดูคำตอบที่เป็นประโยชน์หลายคำตอบในโพสต์นี้

— XML

14

ในหนังสือ Pro Angular-6มีรายละเอียดดังนี้

ใช้ได้ : คุณสมบัตินี้ส่งคืนจริงถ้าเนื้อหาขององค์ประกอบนั้นถูกต้องและไม่จริง
ไม่ถูกต้อง : คุณสมบัตินี้จะส่งกลับจริงถ้าเนื้อหาขององค์ประกอบที่ไม่ถูกต้องและเท็จอย่างอื่น
pristine : คุณสมบัตินี้จะคืนค่าเป็นจริงหากเนื้อหาขององค์ประกอบไม่เปลี่ยนแปลง
สกปรก : คุณสมบัตินี้ผลตอบแทนที่แท้จริงถ้าเนื้อหาองค์ประกอบที่มีการเปลี่ยนแปลง
ไม่ถูกแตะต้อง : คุณสมบัตินี้ส่งคืนจริง ถ้าผู้ใช้ไม่ได้เยี่ยมชมองค์ประกอบ
touched : คุณสมบัตินี้ส่งคืนจริงถ้าผู้ใช้เข้าเยี่ยมชมองค์ประกอบ

— fgul
แหล่งที่มา

6

เป็นมูลค่าการกล่าวขวัญว่าคุณสมบัติการตรวจสอบจะแตกต่างกันสำหรับรูปแบบและองค์ประกอบของแบบฟอร์ม (โปรดทราบว่าสัมผัสและไม่แตะต้องสำหรับเขตข้อมูลเท่านั้น):

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted

They are all properties of the form, and are either true or false.

— Yvonne Aburrow
แหล่งที่มา