Я боролся с формой reset после отправки формы. Кто-то написал этот здесь, который я хочу сделать, чтобы он работал, но не удался. Вот мой Мой пример кода.
$scope.form.$setPristine(); не устанавливает Pristine: {{user_form.$pristine}} в true. См. Пример выше.
$setPristine() был введен в ветки 1.1.x угловой диаграммы. Для этого вам нужно использовать эту версию, а не 1.0.7.
Просто для тех, кто хочет получить $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) все еще необходимо учитывать, но это решает мою проблему: скрыть сообщения об ошибках.
Была аналогичная проблема, когда мне пришлось вернуть форму обратно в нетронутую, но также и нетронутую, поскольку для отображения сообщений об ошибках использовались $invalid и $error. Использовать setPristine() было недостаточно, чтобы очистить сообщения об ошибках.
Я решил это, используя setPristine() и setUntouched(). (См. Документацию Angular: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)
Итак, в моем контроллере я использовал:
$scope.form.setPristine();
$scope.form.setUntouched();
Эти две функции reset составляют полную форму до $pristine и обратно до $нетронутой, так что все сообщения об ошибках были очищены.
Существует еще один способ получить форму, которая отправляет форму в контроллер. Например: -
В поле зрения: -
<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 работал хорошо для меня в прошлом. Но это не отражает всю функциональность 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;
}
});
}
};
Я решил ту же проблему наличия reset формы в ее первозданном состоянии в Angular версии 1.0.7 (нет метода $setPristine)
В моем случае использования форма после заполнения и отправки должна исчезнуть, пока она не понадобится для заполнения другой записи. Поэтому я сделал эффект show/hide, используя ng-switch вместо ng-show. Как я и предполагал, с ng-переключателем, под-дерево DOM формы полностью удаляется и позже воссоздается. Таким образом, первоначальное состояние автоматически восстанавливается.
Мне это нравится, потому что оно простое и чистое, но оно может быть непригодным для любого случая использования.
это может также означать некоторые проблемы с производительностью для больших форм (?). В моей ситуации я еще не сталкивался с этой проблемой.