2013-11-15 2 views
2

AngularJS에서 $setPristine 함수를 사용하여 텍스트 상자를 재설정하려고했지만 원하는 동작이 나타나지 않습니다.

내 양식은 다음과 같습니다

<form name="addInviteForm" ng-controller="InviteCtrl" ng-submit="sendInvitation(userEmail)"> 

     Pristine? {{addInviteForm.$pristine}} 

     <!-- email input --> 
     <div> 
     <input type="email" name="email" ng-model="userEmail" placeholder="Enter email here" class="line-item-input see" required> 
     <span class="error" ng-show="addInviteForm.email.$error.email" style="color:red">Invalid Email</span> 
     </div> 

     <!-- submit button --> 
     <input type="submit" name="send" class="btn btn-success center" value="Send Invitation"> 
</form> 

그리고 내 컨트롤러에서 해당 코드 :

$scope.sendInvitation = function(userEmail) { 

     // do some work here ... 

     // hmm, this doesn't seem to work ... 
     $scope.addInviteForm.$setPristine(); 
    }; 

를 양식 $pristine이 다음 양식 항목에 true로 설정 false으로 설정되어 있는지 보여주고 있지만 텍스트 상자에 데이터를 입력 할 때 양식을 제출 한 후 실제로 이 true로 설정되어 있음을 나타내지 만 텍스트 상자의 값은 제출 단추 이전과 동일하게 유지됩니다 눌렀다.

무엇이 여기에 있습니까?

답변

7

$setPristine 양식의 컨트롤에서 지우지 값을 수행합니다

는 자연 그대로의 상태로 양식을 설정합니다 :

the docs에서.

이 메서드는 'ng-dirty'클래스를 제거하고 폼을 원래 상태 (ng-pristine 클래스)로 설정하기 위해 호출 할 수 있습니다. 이 메서드는이 양식에 포함 된 모든 컨트롤에 전파합니다.

양식을 원래 상태로 되돌리려면 이 양식을 저장하거나 다시 설정 한 후에 양식을 '재사용'할 때 유용합니다. 위의 설명에서 볼 수 있듯이

$setPristine은 폼의 상태를 변경 (함으로써 형상이 제어에 적용되는 CSS 리셋).

각 컨트롤의 값을 지우려면 각 코드에서 수행해야합니다.

This plunker은 실제로는 $setPristine입니다.

+1

감사합니다. 'UserEmail'을'InviteCtrl'의 범위 안에있는 변수에 바인딩하고 제출시 그 변수를 재설정하는 것이 트릭을 완료 한 것처럼 보입니다. – dtg

+5

내가 말할 것입니다 만, 문서화가 그렇게 명확하지는 않습니다. 즉, 컨트롤의 "상태"와 컨트롤의 현재 "가치"사이의 의미적인 차이는 전혀 분명하지 않습니다 .... – dtg

관련 문제