angularjs - filtrar - filtros en ng-model en una entrada

ng model search

Question

Tengo una entrada de texto y no quiero permitir que los usuarios usen espacios, y todo lo que se escribe se convertirá en minúsculas.

Sé que no puedo usar filtros en ng-model, por ejemplo.

ng-model=''tags | lowercase | no_spaces''

Consideré crear mi propia directiva, pero al agregar funciones a $parsers y $formatters no actualicé la entrada, solo otros elementos que tenían ng-model en ella.

¿Cómo puedo cambiar la entrada de la que estoy escribiendo actualmente?

Básicamente, estoy intentando crear la función ''etiquetas'' que funciona igual que la de StackOverflow.

Answer 1

Creo que la intención de las entradas de AngularJS y ngModel direcive es que la entrada no válida nunca debería terminar en el modelo . El modelo siempre debe ser válido. El problema de tener un modelo no válido es que podríamos tener vigilantes que disparan y toman acciones (inapropiadas) basadas en un modelo no válido.

Como lo veo, la solución adecuada aquí es conectarlo a la tubería $parsers y asegurarse de que la entrada no válida no entre en el modelo. No estoy seguro de cómo trataste de abordar las cosas o qué exactamente no funcionó para ti con $parsers pero aquí hay una directiva simple que resuelve tu problema (o al menos mi comprensión del problema):

app.directive(''customValidation'', function(){
return {
require: ''ngModel'',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue.toLowerCase().replace(/ /g, '''');
if (transformedInput!=inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});

Tan pronto como se declare la directiva anterior, se puede usar así:

<input ng-model="sth" ng-trim="false" custom-validation>

Como en la solución propuesta por @Valentyn Shybanov, necesitamos usar la directiva ng-trim si queremos rechazar espacios al comienzo / final de la entrada.

La ventaja de este enfoque es doble:

• El valor inválido no se propaga al modelo
• Usando una directiva es fácil agregar esta validación personalizada a cualquier entrada sin duplicar a los observadores una y otra vez

Answer 2

Puedes intentar esto

$scope.$watch(''tags '',function(){
$scope.tags = $filter(''lowercase'')($scope.tags);
});

Answer 3

Si está utilizando un campo de entrada de solo lectura, puede usar ng-value con filter.

por ejemplo:

ng-value="price | number:8"

Answer 4

Si realiza una validación de entrada asíncrona compleja, puede valer la pena abstraer el ng-model en un nivel como parte de una clase personalizada con sus propios métodos de validación.

https://plnkr.co/edit/gUnUjs0qHQwkq2vPZlpO?p=preview

html

<div>
<label for="a">input a</label>
<input
ng-class="{''is-valid'': vm.store.a.isValid == true, ''is-invalid'': vm.store.a.isValid == false}"
ng-keyup="vm.store.a.validate([''isEmpty''])"
ng-model="vm.store.a.model"
placeholder="{{vm.store.a.isValid === false ? vm.store.a.warning : ''''}}"
id="a" />
<label for="b">input b</label>
<input
ng-class="{''is-valid'': vm.store.b.isValid == true, ''is-invalid'': vm.store.b.isValid == false}"
ng-keyup="vm.store.b.validate([''isEmpty''])"
ng-model="vm.store.b.model"
placeholder="{{vm.store.b.isValid === false ? vm.store.b.warning : ''''}}"
id="b" />
</div>

código

(function() {
const _ = window._;
angular
.module(''app'', [])
.directive(''componentLayout'', layout)
.controller(''Layout'', [''Validator'', Layout])
.factory(''Validator'', function() { return Validator; });
/** Layout controller */
function Layout(Validator) {
this.store = {
a: new Validator({title: ''input a''}),
b: new Validator({title: ''input b''})
};
}
/** layout directive */
function layout() {
return {
restrict: ''EA'',
templateUrl: ''layout.html'',
controller: ''Layout'',
controllerAs: ''vm'',
bindToController: true
};
}
/** Validator factory */
function Validator(config) {
this.model = null;
this.isValid = null;
this.title = config.title;
}
Validator.prototype.isEmpty = function(checkName) {
return new Promise((resolve, reject) => {
if (/^/s+$/.test(this.model) || this.model.length === 0) {
this.isValid = false;
this.warning = `${this.title} cannot be empty`;
reject(_.merge(this, {test: checkName}));
}
else {
this.isValid = true;
resolve(_.merge(this, {test: checkName}));
}
});
};
/**
* @memberof Validator
* @param {array} checks - array of strings, must match defined Validator class methods
*/
Validator.prototype.validate = function(checks) {
Promise
.all(checks.map(check => this[check](check)))
.then(res => { console.log(''pass'', res) })
.catch(e => { console.log(''fail'', e) })
};
})();

Answer 5

Sugeriría ver el valor del modelo y actualizarlo después de chage: http://plnkr.co/edit/Mb0uRyIIv1eK8nTg3Qng?p=preview

El único problema interesante es con los espacios: en AngularJS 1.0.3 ng-model on input recorta automáticamente la cadena, por lo que no detecta que el modelo se modificó si agrega espacios al final o al inicio (para que los espacios no se eliminen automáticamente) código). Pero en 1.1.1 hay una directiva ''ng-trim'' que permite desactivar esta funcionalidad ( commit ). Así que decidí usar 1.1.1 para lograr la funcionalidad exacta que describiste en tu pregunta.

Answer 6

Tuve un problema similar y utilicé

ng-change="handler(objectInScope)"

en mi controlador llamo a un método de objectInScope para que se modifique correctamente (entrada aproximada). En el controlador, he iniciado algo que

$scope.objectInScope = myObject;

Sé que esto no usa ningún filtro o observador sofisticado ... pero es simple y funciona muy bien. El único inconveniente de esto es que el objectInScope se envía en la llamada al controlador ...

Answer 7

Una solución a este problema podría ser aplicar los filtros en el lado del controlador:

$scope.tags = $filter(''lowercase'')($scope.tags);

No olvides declarar $filter como dependencia.

Answer 8

Use una directiva que se sume a las colecciones $ formateadores y $ analizadores para garantizar que la transformación se realice en ambas direcciones.

Consulte esta otra respuesta para obtener más información, incluido un enlace a jsfiddle.