ใน AngularJS ความแตกต่างระหว่าง ng-pristine และ ng-dirty คืออะไร?

อะไรคือความแตกต่างระหว่างng-pristineและng-dirty? ดูเหมือนว่าคุณสามารถมีได้ทั้งสองอย่างtrue:

$scope.myForm.$pristine = true; // after editing the form

ng-dirtyชั้นจะบอกคุณว่ารูปแบบได้รับการแก้ไขโดยผู้ใช้ในขณะที่ng-pristineชั้นบอกคุณว่ารูปแบบยังไม่ได้รับการแก้ไขโดยผู้ใช้ ดังนั้นng-dirtyและng-pristineทั้งสองด้านของเรื่องเดียวกัน

เรียนตั้งอยู่บนเขตข้อมูลใด ๆ ในขณะที่รูปแบบมีสองคุณสมบัติและ$dirty$pristine

คุณสามารถใช้$scope.form.$setPristine()ฟังก์ชั่นเพื่อรีเซ็ตฟอร์มเป็นสถานะเก่า (โปรดทราบว่านี่คือคุณสมบัติ AngularJS 1.1.x)

หากคุณต้องการ$scope.form.$setPristine()พฤติกรรม -ish แม้ในสาขา 1.0.x ของ AngularJS คุณต้องม้วนโซลูชันของคุณเอง (สามารถพบได้ที่นี่ ) โดยทั่วไปที่นี้หมายถึงการทำซ้ำมากกว่าเขตทุกรูปแบบและการตั้งค่าของพวกเขาธง$dirtyfalse

หวังว่านี่จะช่วยได้

pristine บอกเราว่าเขตข้อมูลยังบริสุทธิ์อยู่หรือไม่และสิ่งสกปรกจะบอกเราว่าผู้ใช้พิมพ์อะไรในช่องที่เกี่ยวข้องแล้วหรือไม่:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<form ng-app="" name="myForm">
  <input name="email" ng-model="data.email">
  <div class="info" ng-show="myForm.email.$pristine">
    Email is virgine.
  </div>
  <div class="error" ng-show="myForm.email.$dirty">
    E-mail is dirty
  </div>
</form>

ฟิลด์ที่ลงทะเบียนเหตุการณ์คีย์ดาวน์เพียงครั้งเดียวจะไม่มีความบริสุทธิ์อีกต่อไป (ไม่เก่าแก่อีกต่อไป) ดังนั้นจึงสกปรกตลอดไป

เห็นได้ชัดว่าคำสั่งทั้งสองตอบสนองจุดประสงค์เดียวกันและแม้ว่าดูเหมือนว่าการตัดสินใจของทีมเชิงมุมที่จะรวมทั้งการแทรกแซงหลักการ DRY และเพิ่มน้ำหนักบรรทุกของหน้า แต่ก็ยังค่อนข้างเป็นประโยชน์ที่จะให้ทั้งคู่อยู่ด้วยกัน มันง่ายกว่าในการจัดรูปแบบองค์ประกอบอินพุตของคุณเนื่องจากคุณมีทั้ง .ng-pristine และ .ng-dirty สำหรับจัดแต่งทรงผมในไฟล์ css ของคุณ ฉันเดาว่านี่เป็นเหตุผลหลักในการเพิ่มทั้งสองคำสั่ง

ตามที่ระบุไว้แล้วในคำตอบก่อนหน้านี้ng-pristineมีไว้เพื่อระบุว่าฟิลด์ไม่ได้รับการแก้ไขในขณะที่ng-dirtyบอกว่ามีการแก้ไขแล้ว ทำไมต้องทั้งสองอย่าง?

สมมติว่าเรามีแบบฟอร์มที่มีโทรศัพท์และที่อยู่อีเมลในช่องต่างๆ จำเป็นต้องใช้โทรศัพท์หรืออีเมลและคุณต้องแจ้งให้ผู้ใช้ทราบเมื่อมีข้อมูลที่ไม่ถูกต้องในแต่ละช่อง สิ่งนี้สามารถทำได้โดยใช้ng-dirtyและng-pristineร่วมกัน:

<form name="myForm">
    <input name="email" ng-model="data.email" ng-required="!data.phone">
    <div class="error" 
         ng-show="myForm.email.$invalid && 
                  myForm.email.$pristine &&
                  myForm.phone.$pristine">Phone or e-mail required</div>
    <div class="error" 
         ng-show="myForm.email.$invalid && myForm.email.$dirty">
        E-mail is invalid
    </div>

    <input name="phone" ng-model="data.phone" ng-required="!data.email">
    <div class="error" 
         ng-show="myForm.phone.$invalid && 
                  myForm.email.$pristine &&
                  myForm.phone.$pristine">Phone or e-mail required</div>
    <div class="error" 
         ng-show="myForm.phone.$invalid && myForm.phone.$dirty">
        Phone is invalid
    </div>
</form>

ng-pristine (ดั้งเดิม $)

Boolean True หากยังไม่ได้ใช้รูปแบบ / อินพุต ( ไม่ได้แก้ไขโดยผู้ใช้ )

ng-dirty (สกปรก $)

Boolean True หากมีการใช้รูปแบบ / อินพุต ( แก้ไขโดยผู้ใช้ )

$ setDirty (); ตั้งค่าแบบฟอร์มเป็นสถานะสกปรก วิธีนี้สามารถเรียกได้ว่าเพิ่มคลาส 'ng-dirty' และตั้งค่าแบบฟอร์มเป็นสถานะสกปรก (คลาส ng-dirty) วิธีนี้จะเผยแพร่สถานะปัจจุบันไปยังฟอร์มหลัก

$ setPristine (); ตั้งค่าแบบฟอร์มเป็นสถานะที่บริสุทธิ์ วิธีนี้ตั้งค่าสถานะ $ pristine ของแบบฟอร์มเป็นจริงสถานะสกปรก $ เป็นเท็จลบคลาส ng-dirty และเพิ่มคลาส ng-pristine นอกจากนี้ยังตั้งค่าสถานะที่ $ ส่งเป็นเท็จ วิธีนี้จะเผยแพร่ไปยังตัวควบคุมทั้งหมดที่มีอยู่ในแบบฟอร์มนี้

การตั้งค่าฟอร์มให้กลับสู่สถานะที่บริสุทธิ์มักจะมีประโยชน์เมื่อเราต้องการ 'ใช้ซ้ำ' แบบฟอร์มหลังจากบันทึกหรือรีเซ็ต