Acredito que a intenção das entradas AngularJS e a ngModel
diretiva é que as entradas inválidas nunca terminem no modelo . O modelo deve sempre ser válido. O problema de ter um modelo inválido é que podemos ter observadores que acionam e executam ações (inadequadas) com base no modelo inválido.
A meu ver, a solução adequada aqui é conectar-se ao $parsers
pipeline e garantir que entradas inválidas não entrem no modelo. Não tenho certeza de como você tentou abordar as coisas ou o que exatamente não funcionou para você, $parsers
mas aqui está uma diretiva simples que resolve seu problema (ou pelo menos minha compreensão do 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;
});
}
};
});
Assim que a diretiva acima for declarada, ela poderá ser usada da seguinte maneira:
<input ng-model="sth" ng-trim="false" custom-validation>
Como na solução proposta por @Valentyn Shybanov, precisamos usar a ng-trim
diretiva se queremos proibir espaços no início / final da entrada.
A vantagem dessa abordagem é 2 vezes:
- Valor inválido não é propagado para o modelo
- Usando uma diretiva, é fácil adicionar essa validação personalizada a qualquer entrada sem duplicar os observadores repetidamente