AngularJs. $SetPristine для формы reset

Ответ 1

$setPristine() был введен в ветки 1.1.x угловой диаграммы. Для этого вам нужно использовать эту версию, а не 1.0.7.

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

Ответ 2

Просто для тех, кто хочет получить $setPristine без обновления до v1.1.x, вот функция, которую я использовал для имитации функции $setPristine. Я не хотел использовать v1.1.5, потому что один из компонентов AngularUI, который я использовал, не совместим.

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) все еще необходимо учитывать, но это решает мою проблему: скрыть сообщения об ошибках.

Ответ 3

Была аналогичная проблема, когда мне пришлось вернуть форму обратно в нетронутую, но также и нетронутую, поскольку для отображения сообщений об ошибках использовались $invalid и $error. Использовать setPristine() было недостаточно, чтобы очистить сообщения об ошибках.

Я решил это, используя setPristine() и setUntouched(). (См. Документацию Angular: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)

Итак, в моем контроллере я использовал:

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

Эти две функции reset составляют полную форму до $pristine и обратно до $нетронутой, так что все сообщения об ошибках были очищены.

Ответ 4

Существует еще один способ получить форму, которая отправляет форму в контроллер. Например: -

В поле зрения: -

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

Ответ 5

Ответ DavidLn работал хорошо для меня в прошлом. Но это не отражает всю функциональность setPristine, которая на этот раз сработала. Вот более полная прокладка:

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

Ответ 6

Я решил ту же проблему наличия reset формы в ее первозданном состоянии в Angular версии 1.0.7 (нет метода $setPristine)

В моем случае использования форма после заполнения и отправки должна исчезнуть, пока она не понадобится для заполнения другой записи. Поэтому я сделал эффект show/hide, используя ng-switch вместо ng-show. Как я и предполагал, с ng-переключателем, под-дерево DOM формы полностью удаляется и позже воссоздается. Таким образом, первоначальное состояние автоматически восстанавливается.

Мне это нравится, потому что оно простое и чистое, но оно может быть непригодным для любого случая использования.

это может также означать некоторые проблемы с производительностью для больших форм (?). В моей ситуации я еще не сталкивался с этой проблемой.