AngularJs. $ SetPristine để đặt lại biểu mẫu

Question

Tôi đang vật lộn để đặt lại biểu mẫu khi biểu mẫu được gửi. Ai đó đã đăng bài này Here mà tôi muốn làm cho nó hoạt động nhưng không thành công. Đây là số My Code Example của tôi.

$scope.form.$setPristine(); không được đặt Pristine: {{user_form.$pristine}} đến đúng. Xem ví dụ ở trên.

Answer 1

$ setPristine() được giới thiệu trong nhánh angularjs 1.1.x. Bạn cần sử dụng phiên bản đó thay vì 1.0.7 để nó hoạt động.

Xem http://plnkr.co/edit/815Bml?p=preview

Answer 2

Chỉ cần cho những ai muốn có được $setPristine mà không cần phải nâng cấp lên v1.1.x, đây là chức năng tôi sử dụng để mô phỏng các $setPristine chức năng. Tôi đã miễn cưỡng sử dụng v1.1.5 vì một trong những thành phần AngularUI tôi đã sử dụng không tương thích.

 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; 
        } 
       }); 
      } 
     }; 

Lưu ý rằng nó chỉ làm cho $dirty lĩnh vực sạch và giúp thay đổi tình trạng 'hiển thị lỗi' như $scope.myForm.myField.$dirty && $scope.myForm.myField.$invalid.

Các phần khác của đối tượng biểu mẫu (như lớp css) vẫn cần xem xét, nhưng điều này giải quyết được vấn đề của tôi: ẩn thông báo lỗi.

Answer 3

tôi giải quyết cùng một vấn đề vì phải thiết lập lại một hình thức ở trạng thái nguyên sơ của nó trong phiên bản 1.0.7 kiễu góc (không có phương pháp $ setPristine)

Trong trường hợp sử dụng của tôi, hình thức, sau khi được điền và nộp phải biến mất cho đến khi nó là một lần nữa cần thiết để điền vào một bản ghi khác. Vì vậy, tôi đã thực hiện các hiệu ứng hiển thị/ẩn bằng cách sử dụng ng-switch thay vì ng-show. Như tôi nghi ngờ, với ng-switch, hình thức DOM cây con là hoàn toàn loại bỏ và sau đó tái tạo. Vì vậy trạng thái nguyên sơ được khôi phục tự động.

Tôi thích nó vì nó đơn giản và sạch sẽ nhưng nó có thể không phù hợp với trường hợp sử dụng của bất kỳ ai.

nó cũng có thể hàm ý một số vấn đề về hiệu suất cho các biểu mẫu lớn (?) Trong trường hợp của tôi, tôi chưa gặp phải vấn đề này.

Answer 4

DavidLn's answer đã hoạt động tốt cho tôi trong quá khứ. Nhưng nó không nắm bắt được tất cả các chức năng của setPristine, điều này đã làm tôi thất vọng lần này. Đây là một shim đầy đủ hơn:

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; 
      } 
     }); 
    } 
}; 

Answer 5

Có một cách khác để nguyên sơ dạng đó là bằng cách gửi hình vào bộ điều khiển. Ví dụ: -

Theo quan điểm: -

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

Trong Bộ điều khiển: -

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

Answer 6

Đã có một vấn đề tương tự, nơi tôi đã phải thiết lập các hình thức trở lại nguyên sơ, mà còn bị ảnh hưởng bởi vì $ invalid và $ error đều được sử dụng để hiển thị các thông báo lỗi. Chỉ sử dụng setPristine() là không đủ để xóa các thông báo lỗi.

Tôi đã giải quyết nó bằng cách sử dụng setPristine() và setUntouched(). (Xem tài liệu góc của: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)

Vì vậy, trong điều khiển của tôi, tôi đã sử dụng:

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

Hai chức năng thiết lập lại các hình thức hoàn chỉnh đến $ hoang sơ và trở lại $ hoang sơ, để tất cả các thông báo lỗi là đã xóa.