Ответ 1

Решение без обходного пути

Я придумал решение, которое использует AngularJS без каких-либо обходных решений. Трюк здесь заключается в использовании способности AngularJS иметь более одной директивы с тем же именем.

Как упоминалось ранее, на самом деле существует запрос на pull (https://github.com/angular/angular.js/pull/1127), который превратил его в ветку AngularJS 1.1.x, которая позволяет формам be reset. Конец этого запроса на растяжение изменяет директивы ngModel и form/ngForm (мне бы хотелось добавить ссылку, но Stackoverflow не хочет, чтобы я добавлял больше двух ссылок).

Теперь мы можем определить собственные директивы ngModel и form/ngForm и расширить их с помощью функций, предоставляемых в запросе pull.

Я завернул эти директивы в модуль AngularJS с именем resettableForm. Все, что вам нужно сделать, это включить этот модуль в свой проект, а ваша версия AngularJS версии 1.0.x ведет себя так, как если бы это была версия Angular 1.1.x в этом отношении.

'' После обновления до 1.1.x вам даже не нужно обновлять свой код, просто удалите модуль, и все готово! ''

Этот модуль также передает все тесты, добавленные в ветвь 1.1.x для функции reset.

Вы можете увидеть модуль, работающий в примере в jsFiddle (http://jsfiddle.net/jupiter/7jwZR/1/), который я создал.

Шаг 1: Включите модуль сбрасываемой формы в проект

(function(angular) {

// Copied from AngluarJS
function indexOf(array, obj) {
  if (array.indexOf) return array.indexOf(obj);

  for ( var i = 0; i < array.length; i++) {
    if (obj === array[i]) return i;
  }
  return -1;
}

// Copied from AngularJS
function arrayRemove(array, value) {
  var index = indexOf(array, value);
  if (index >=0)
    array.splice(index, 1);
  return value;
}

// Copied from AngularJS
var PRISTINE_CLASS = 'ng-pristine';
var DIRTY_CLASS = 'ng-dirty';

var formDirectiveFactory = function(isNgForm) {
    return function() {
        var formDirective = {
            restrict: 'E',
            require: ['form'],
            compile: function() {
                return {
                    pre: function(scope, element, attrs, ctrls) {
                        var form = ctrls[0];
                        var $addControl = form.$addControl;
                        var $removeControl = form.$removeControl;
                        var controls = [];
                        form.$addControl = function(control) {
                            controls.push(control);
                            $addControl.apply(this, arguments);
                        }
                        form.$removeControl = function(control) {
                            arrayRemove(controls, control);
                            $removeControl.apply(this, arguments);
                        }
                        form.$setPristine = function() {
                            element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
                            form.$dirty = false;
                            form.$pristine = true;
                            angular.forEach(controls, function(control) {
                                control.$setPristine();
                            });
                        }
                    },
                };
            },
        };
        return isNgForm ? angular.extend(angular.copy(formDirective), {restrict: 'EAC'}) : formDirective;
    };
}
var ngFormDirective = formDirectiveFactory(true);
var formDirective = formDirectiveFactory();
angular.module('resettableForm', []).
    directive('ngForm', ngFormDirective).
    directive('form', formDirective).
    directive('ngModel', function() {
        return {
            require: ['ngModel'],
            link: function(scope, element, attrs, ctrls) {
                var control = ctrls[0];
                control.$setPristine = function() {
                    this.$dirty = false;
                    this.$pristine = true;
                    element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
                }
            },
        };
    });
})(angular);

Шаг 2. Предоставьте метод на вашем контроллере, который сбрасывает модель

Помните, что вы должны reset модель при reset форме. В контроллере вы можете написать:

var myApp = angular.module('myApp', ['resettableForm']);

function MyCtrl($scope) {
    $scope.reset = function() {
        $scope.form.$setPristine();
        $scope.model = '';
    };
}

Шаг 3. Включите этот метод в свой HTML-шаблон

<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="form">
    <input name="requiredField" ng-model="model.requiredField" required/> (Required, but no other validators)
    <p ng-show="form.requiredField.$errror.required">Field is required</p>
    <button ng-click="reset()">Reset form</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
</div>
</dvi>

Ответ 2

Я думаю, стоит упомянуть, что в более поздних версиях Angular (например, 1.1.5) вы можете вызвать $setPristine в форме.

$scope.formName.$setPristine(true)

Это также установит все элементы управления формы в нетронутое состояние.

FormController. $setPristine

Ответ 3

ИЗМЕНИТЬ... Я удаляю свой старый ответ, поскольку он не был адекватным.

На самом деле я просто столкнулся с этой проблемой, и вот мое решение: я сделал метод расширения для angular. Я сделал это, выполнив немного то, что $scope.form. $SetValidity() выполнял (в обратном порядке)...

Здесь демонстрационная версия plnkr в действии

Вот вспомогательный метод, который я сделал. Это взлом, но он работает:

angular.resetForm = function (scope, formName, defaults) {
    $('form[name=' + formName + '], form[name=' + formName + '] .ng-dirty').removeClass('ng-dirty').addClass('ng-pristine');
    var form = scope[formName];
    form.$dirty = false;
    form.$pristine = true;
    for(var field in form) {
      if(form[field].$pristine === false) {
        form[field].$pristine = true;
      }
      if(form[field].$dirty === true) {
        form[field].$dirty = false;
      }
    }
    for(var d in defaults) {
      scope[d] = defaults[d];
    }
};

Надеюсь, это кому-то поможет.

Ответ 4

Поля формы должны быть связаны с переменной в пределах области $. Вы можете reset создать форму путем сброса переменных. Вероятно, это должен быть один объект, например $scope.form.

Допустим, у вас простая форма для пользователя.

app.controller('Ctrl', function Ctrl($scope){
  var defaultForm = {
    first_name : "",
    last_name : "",
    address: "",
    email: ""
  };
  $scope.resetForm = function(){
    $scope.form = defaultForm;
  };
});

Это будет отлично работать, пока ваш html выглядит следующим образом:

<form>
  <input ng-model="form.first_name"/>
  <input ng-model="form.last_name"/>
  <input ng-model="form.address"/>
  <input ng-model="form.email"/>
  <button ng-click="resetForm()">Reset Form</button>
</form>

Возможно, я не понимаю эту проблему здесь, поэтому, если это не касается вашего вопроса, не могли бы вы объяснить, почему именно?

Ответ 5

Здесь я нашел решение для того, чтобы поместить это в свое первозданное состояние.

var def = {
    name: '',
    password: '',
    email: '',
    mobile: ''
};

$scope.submited = false;

$scope.regd = function (user) {
    if ($scope.user.$valid) {
        $http.post('saveUser', user).success(function (d) {
            angular.extend($scope.user, def);
            $scope.user.$setPristine(true);
            $scope.user.submited = false;
        }).error(function (e) {});
    } else {
        $scope.user.submited = true;
    }
};

Просто напишите angular.extends(src, dst), чтобы исходный объект просто расширялся пустой объект, который будет отображаться как пустой, и все остальные будут по умолчанию.

Ответ 6

Использование внешней директивы и большого количества jquery

app.controller('a', function($scope) {
    $scope.caca = function() {
        $scope.$emit('resetForm');
    }
});

app.directive('form', function() {
    return {
        restrict: 'E',
        link: function(scope, iElem) {
            scope.$on('resetForm', function() {
                iElem.find('[ng-model]').andSelf().add('[ng-form]').each(function(i, elem) {
                    var target = $(elem).addClass('ng-pristine').removeClass('ng-dirty');
                    var control = target.controller('ngModel') || target.controller('form');
                    control.$pristine = true;
                    control.$dirty = false;
                });
            });
        }
    };
});

http://jsfiddle.net/pPbzz/2/

Ответ 7

Простой способ: просто передайте форму в функцию контроллера. Ниже формы "myForm" ссылается на this, что эквивалентно $scope.

<div ng-controller="MyController as mc">
    <ng-form name="myform">
        <input ng-model="mc.myFormValues.name" type="text" required>
        <button ng-click="mc.doSometing(this.myform)" type="submit" 
                ng-disabled="myform.$invalid||myform.$pristine">Do It!</button>
    </ng-form>
</div>

Контроллер:

function MyController(MyService) {
    var self = this;
    self.myFormValues = {
        name: 'Chris'
    };
    self.doSomething = function (form) {
        var aform = form;
        MyService.saveSomething(self.myFromValues)
            .then(function (result) {
                ...
                aform.$setPristine();
            }).catch(function (e) {
                ...
            aform.$setDirty();
        })
    }
}