AngularJs .$setPris틴에서 폼 리셋

AngularJs .$setPris틴에서 폼 리셋

양식이 제출되면 양식을 재설정하는 데 어려움을 겪고 있습니다.어떤 분이 이걸 올려주셨는데 잘 되고 싶은데 잘 안 되고 있어요.My Code 예제입니다.

$scope.form.$setPristine();설정되어 있지 않다Pristine: {{user_form.$pristine}}정말이야.위의 예를 참조하십시오.

$setPristin()은 angularjs의 1.1.x 브랜치에 도입되었습니다.이 버전을 사용하려면 1.0.7이 아닌 버전을 사용해야 합니다.

http://plnkr.co/edit/815Bml?p=preview 를 참조해 주세요.

$invalid와 $error가 모두 오류 메시지에 사용되었기 때문에 폼을 원래대로 되돌려야 하는 유사한 문제가 있었습니다.setPristin()만 사용하는 것만으로는 오류 메시지를 지울 수 없었습니다.

setPrista()와 setUntouched()를 사용하여 해결했습니다.( Angular의 매뉴얼을 참조해 주세요).

그래서 컨트롤러에서는 다음을 사용했습니다.

$scope.form.setPristine(); 
$scope.form.setUntouched();

이 2개의 함수는 완전한 폼을 $pris틴으로 리셋하고 $untouched로 리셋하여 모든 오류 메시지를 지웁니다.

원하는 분들을 위해서$setPristinev1.1.x로 업그레이드 할 필요 없이 다음 함수를 사용하여 v1.1.x를 시뮬레이트합니다.$setPristine기능.나는 v1.1.5를 사용하는 것을 꺼렸다. 왜냐하면 Angular 중 하나는사용한 UI 컴포넌트가 호환되지 않습니다.

var setPristine = function(form) {
    if (form.$setPristine) {//only supported from v1.1.x
        form.$setPristine();
    } else {
        /*
         *Underscore looping form properties, you can use for loop too like:
         *for(var i in form){ 
         *  var input = form[i]; ...
         */
        _.each(form, function (input) {
            if (input.$dirty) {
                input.$dirty = false;
            }
        });
    }
};

주의: 이 기능은$dirty필드를 청소하고 다음과 같은 'show error' 조건을 변경하는 데 도움이 됩니다.$scope.myForm.myField.$dirty && $scope.myForm.myField.$invalid.

폼 오브젝트의 다른 부분(css 클래스 등)도 고려해야 하지만, 이것으로 에러 메시지를 숨길 수 있는 문제가 해결됩니다.

컨트롤러에 양식을 보내는 방법으로 원본 형태로 전환하는 방법도 있습니다.예를 들어 다음과 같습니다.

표시 중:-

<form name="myForm" ng-submit="addUser(myForm)" novalidate>
    <input type="text" ng-mode="user.name"/>
     <span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid">
      <span ng-show="myForm.name.$error.required">Name is required.</span>
    </span>

    <button ng-disabled="myForm.$invalid">Add User</button>
</form>

컨트롤러 내:-

$scope.addUser = function(myForm) {
       myForm.$setPristine();
};

DavidLn의 답변은 과거에 나에게 효과가 있었다.하지만 setPris틴의 모든 기능을 다 담아내진 못했는데, 이번에 그게 내 발목을 잡았어요.여기 풀러 심이 있습니다.

var form_set_pristine = function(form){
    // 2013-12-20 DF TODO: remove this function on Angular 1.1.x+ upgrade
    // function is included natively

    if(form.$setPristine){
        form.$setPristine();
    } else {
        form.$pristine = true;
        form.$dirty = false;
        angular.forEach(form, function (input, key) {
            if (input.$pristine)
                input.$pristine = true;
            if (input.$dirty) {
                input.$dirty = false;
            }
        });
    }
};

Angular 버전 1.0.7($setPris틴 메서드 없음)에서 폼을 원래 상태로 리셋해야 하는 동일한 문제를 해결했습니다.

제 사용 예에서 폼은 작성 및 제출된 후 다른 레코드에 다시 기입해야 할 때까지 사라져야 합니다.그래서 저는 ng-show가 아닌 ng-switch를 사용하여 show/hide 효과를 냈습니다.예상대로 ng-switch에서는 폼 DOM 서브트리가 완전히 삭제되어 나중에 다시 생성됩니다.따라서 자동으로 원래 상태로 복원됩니다.

심플하고 깔끔해서 마음에 들지만, 누구에게도 적합하지 않을 수도 있습니다.

또, 큰 폼(?)의 퍼포먼스 문제도 생각할 수 있습니다.저에게는 아직 이 문제가 발생하지 않았습니다.

언급URL : https://stackoverflow.com/questions/16759221/angularjs-setpristine-to-reset-form