ejemplos - angularjs pdf
Restablecer el formulario al estado prístino(AngularJS 1.0.x) (7)
Una función para restablecer los campos de formulario a un estado prístino (restablecer el estado sucio) está en la hoja de ruta para AngularJS 1.1.x. Desafortunadamente, tal función falta en la versión estable actual.
¿Cuál es la mejor manera de restablecer todos los campos de formulario a su estado prístino inicial para AngularJS 1.0.x.?
Me gustaría saber si esto se puede solucionar con una directiva u otra solución simple. Prefiero una solución sin tener que tocar las fuentes originales de AngularJS. Para aclarar y demostrar el problema, un enlace a JSFiddle. http://jsfiddle.net/juurlink/FWGxG/7/
La característica deseada está en la hoja de ruta - http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html
Solicitud de funciones : https://github.com/angular/angular.js/issues/856
Solución propuesta Solicitud de extracción - https://github.com/angular/angular.js/pull/1127
Actualizado con posible solución
¿Buena solución?
Acabo de descubrir que puedo recompilar la parte HTML y volver a ponerla en el DOM. Funciona y está bien para una solución temporal, pero también como @blesh mencionado en los comentarios:
Los controladores deben usarse solo para lógica de negocios, ¡no para DOM!
<div id="myform">
<form class="form-horizontal" name="form">
</form>
</div>
Y en mi controlador en resetForm() :
- Guarde el HTML original no modificado
- Recompile el HTML original guardado
- Eliminar el formulario actual del DOM
- Inserta la nueva plantilla compilada en el DOM
El JavaScript:
var pristineFormTemplate = $(''#myform'').html();
$scope.resetForm = function () {
$(''#myform'').empty().append($compile(pristineFormTemplate)($scope));
}
Solución sin una solución alternativa
Se me ocurrió una solución que usa AngularJS sin ningún tipo de solución. El truco aquí es usar la capacidad de AngularJS para tener más de una directiva con el mismo nombre.
Como otros mencionaron, en realidad hay una solicitud de extracción ( https://github.com/angular/angular.js/pull/1127 ) que llegó a la rama AngularJS 1.1.x que permite que los formularios se restablezcan. El compromiso con esta solicitud de extracción altera las directivas ngModel y form / ngForm (me hubiera gustado agregar un enlace, pero no quiere que agregue más de dos enlaces).
Ahora podemos definir nuestras propias directivas ngModel y form / ngForm y ampliarlas con la funcionalidad proporcionada en la solicitud de extracción.
He envuelto estas directivas en un módulo AngularJS llamado resettableForm. Todo lo que tiene que hacer es incluir este módulo en su proyecto y su AngularJS versión 1.0.x se comporta como si fuera una versión Angular 1.1.x en este sentido.
'''' Una vez que actualices a 1.1.x, ni siquiera tienes que actualizar tu código, simplemente elimina el módulo y listo ''''.
Este módulo también pasa todas las pruebas agregadas a la rama 1.1.x para la funcionalidad de restablecimiento de formularios.
Puede ver el módulo trabajando en un ejemplo en jsFiddle ( http://jsfiddle.net/jupiter/7jwZR/1/ ) que creé.
Paso 1: Incluye el módulo resettableform en tu proyecto
(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);
Paso 2: Proporcione un método en su controlador que reinicie el modelo
Tenga en cuenta que debe restablecer el modelo cuando restablece el formulario. En tu controlador puedes escribir:
var myApp = angular.module(''myApp'', [''resettableForm'']);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.form.$setPristine();
$scope.model = '''';
};
}
Paso 3: Incluye este método en tu plantilla 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>
Aquí he encontrado una solución para poner el de a su estado prístino.
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;
}
};
Simplemente escriba angular.extends (src, dst) , de modo que su objeto original simplemente amplíe el objeto en blanco, que aparecerá en blanco y el resto en forma predeterminada.
Creo que vale la pena mencionar que en las versiones posteriores de Angular (por ejemplo, 1.1.5), puede llamar a $setPristine en el formulario.
$scope.formName.$setPristine(true)
Esto establecerá todos los controles de formulario en estado prístino también.
EDITAR ... Estoy eliminando mi respuesta anterior, ya que no era adecuada.
De hecho, me encontré con este problema y esta fue mi solución: hice un método de extensión para angular. Lo hice siguiendo un poco de lo que $ scope.form. $ SetValidity () estaba haciendo (al revés) ...
Aquí hay una demo de plnkr en acción
Aquí está el método de ayuda que hice. Es un truco, pero funciona:
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];
}
};
Espero que esto sea útil para alguien.
La manera fácil: simplemente pase el formulario a la función de controlador. Debajo del formulario "myForm" se hace referencia a esto , que es equivalente a $ 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>
El controlador:
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();
})
}
}
Los campos de su formulario deben estar vinculados a una variable dentro de su $ scope. Puede restablecer el formulario restableciendo las variables. Probablemente debería ser un único objeto como $ scope.form.
Digamos que tiene un formulario simple para un usuario.
app.controller(''Ctrl'', function Ctrl($scope){
var defaultForm = {
first_name : "",
last_name : "",
address: "",
email: ""
};
$scope.resetForm = function(){
$scope.form = defaultForm;
};
});
Esto funcionará muy bien siempre que su html se vea así:
<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>
Tal vez no estoy entendiendo el problema aquí, así que si esto no aborda su pregunta, ¿podría explicar por qué exactamente?
Usando una directriz externa y un montón de 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;
});
});
}
};
});