ngModel.$解析器忽略ng-model值末尾的空格

ngModel.$parsers ingore whitespace at the end of ng-model value

本文关键字：空格 ng-model ngModel      更新时间：2023-09-26

我有这样的指令:

  .directive('noWhitespace', ['$parse', function($parse) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
        /*
        scope.$watch(attrs.ngModel, function(value) {
          var getter = $parse(value);
          update(getter(scope));
        });
        */
        function update(viewValue) {
          console.log(JSON.stringify(viewValue));
          if (viewValue.match(/'s/)) {
            ngModel.$setValidity('whitespace', false);
            return undefined;
          } else {
            ngModel.$setValidity('whitespace', true);
            return viewValue;
          }
        }
        ngModel.$parsers.unshift(update);
      }
    };
  }])

，当我像这样使用它时:

<form name="something" novalidate>
  <input ng-model="myValue" no-whitespace/>
  <div ng-show="something.myValue.$error.whitespace">
    Error
  </div>
</form>

，然后我输入一些东西，然后在末尾有几个空格，直到我在这些空格之后输入字符，update才被调用，然后我得到错误，我有空格。(当我在开头放空格或只放空格时，也会发生同样的情况)。这是为什么?如何解决?正如你在评论中看到的，我试图使用$watch+$parse，但得到错误Cannot read property 'match' of undefined。

在你的模板中试试:

<form name="something" novalidate>
  <input ng-model="myValue" no-whitespace ng-trim="false"/>
  <div ng-show="something.myValue.$error.whitespace">
    Error
  </div>
</form>

这将解决ng-model在输入空格时不更新的问题。

这是angular中模型解析器的预期行为，其想法是，如果输入的文本不正确(最后有空格)，ngModel应该返回undefined。当你想到它，为什么你要保存一个值到ngModel无论如何，如果它是不正确的根据您的验证?

这是相关位:

if (viewValue.match(/'s/)) {
  ngModel.$setValidity('whitespace', false);
  return undefined;
}

您将有效性设置为false并返回undefined。

您可以保持模型更新，即使它的值没有通过返回viewValue总是验证:

if (viewValue.match(/'s/)) 
  ngModel.$setValidity('whitespace', false);
else 
  ngModel.$setValidity('whitespace', true);
// Return viewvalue regardless of whether it validates or not
return viewValue;
相关文章：