[angularjs] AngularJS에서 ng-pristine과 ng-dirty의 차이점은 무엇입니까?

Program / 글쓴이

의 차이점은 무엇입니까 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()AngularJS의 1.0.x 브랜치에서도 -ish 동작 을 원하면 자체 솔루션을 롤링해야합니다 ( 여기 에서 꽤 좋은 솔루션을 찾을 수 있습니다 ). 기본적으로 이것은 모든 양식 필드를 반복하고 $dirty플래그를 false.

도움이 되었기를 바랍니다.

답변

pristine은 필드가 아직 처녀인지 여부를 알려주고 dirty는 사용자가 관련 필드에 이미 아무것도 입력했는지 여부를 알려줍니다.

<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>

스 니펫 확장

단일 keydown 이벤트를 등록한 필드는 더 이상 순수하지 않으며 (더 이상 원시 상태가 아님) 영원히 더럽습니다.

답변

두 지시문은 분명히 동일한 목적을 수행하며, 앵귤러 팀이 둘 다 DRY 원칙을 방해하고 페이지의 페이로드를 추가하는 것으로 보이지만, 둘 다 사용하는 것이 여전히 실용적입니다. css 파일에서 스타일링에 사용할 수있는 .ng-pristine 및 .ng-dirty가 모두 있으므로 입력 요소의 스타일을 지정하는 것이 더 쉽습니다. 이것이 두 가지 지시문을 모두 추가 한 주된 이유라고 생각합니다.

답변

이전 답변에서 이미 언급했듯이은 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 ($ pristine)

Boolean 양식 / 입력이 아직 사용되지 않은 경우 True ( 사용자가 수정하지 않음 )

ng-dirty ($ dirty)

Boolean 양식 / 입력이 사용 된 경우 True ( 사용자가 수정 )

$ setDirty ();
양식을 더티 상태로 설정합니다. 이 메소드를 호출하여 ‘ng-dirty’클래스를 추가하고 양식을 더티 상태 (ng-dirty 클래스)로 설정할 수 있습니다. 이 메소드는 현재 상태를 상위 양식에 전파합니다.

$ setPristine ();
양식을 원래 상태로 설정합니다. 이 메서드는 양식의 $ pristine 상태를 true로, $ dirty 상태를 false로 설정하고, ng-dirty 클래스를 제거하고 ng-pristine 클래스를 추가합니다. 또한 $ submitted 상태를 false로 설정합니다. 이 메서드는이 양식에 포함 된 모든 컨트롤에도 전파됩니다.

양식을 원래 상태로 다시 설정하는 것은 양식을 저장하거나 재설정 한 후 ‘재사용’하려는 경우 유용합니다.

답변