angularjs - 对输入中的 ng-model 进行过滤

Question

我有一个文本输入，但我不想允许用户使用空格，并且输入的所有内容都会变成小写。

我知道我不允许在 ng-model 上使用过滤器，例如。

ng-model='tags | lowercase | no_spaces'

我考虑创建自己的指令，但向 $parsers 和 $formatters 添加函数并没有更新输入，仅更新了具有 ng- 的其他元素模型。

如何更改我当前正在输入的输入？

我本质上是在尝试创建“标签”功能，其工作方式与 StackOverflow 上的功能类似。

Answer 1

我相信 AngularJS 输入和 ngModel 指令的目的是无效输入永远不会出现在模型中。该模型应该始终有效。无效模型的问题在于，我们可能会有观察者根据无效模型触发并采取(不适当的)操作。

据我所知，正确的解决方案是插入 $parsers 管道并确保无效输入不会进入模型。我不确定您是如何尝试处理问题的，或者什么对您来说完全不起作用 $parsers 但这里有一个简单的指令可以解决您的问题(或者至少是我对问题的理解) ):

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;         
       });
     }
   };
});

一旦声明了上述指令，就可以像这样使用它:

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

正如 @Valentyn Shybanov 提出的解决方案一样，如果我们想禁止在输入的开头/结尾出现空格，我们需要使用 ng-trim 指令。

这种方法有两个优点:

• 无效值不会传播到模型
• 使用指令可以轻松将此自定义验证添加到任何输入，而无需一遍又一遍地重复观察者