ngModel.ngModel值末尾的$parsers空格

Question

我有这样的指令：

  .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>

我键入了一些内容，然后在结尾处很少有空格被调用，直到我在这些空格之后键入字符，然后我得到了有空格的错误。(当我把空格放在开头或只有空格时，也会发生同样的情况)。为什么是这样，怎么解决呢？正如您在注释中看到的，我尝试使用$watch+$parse，但得到了错误Cannot read property 'match' of undefined。

Answer 1

在模板中尝试以下内容：

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

这将解决当输入空空间时ng模型不更新的问题。

编辑: Derp，属性在输入元素中，而不是在div中。

Answer 2

这是模型解析器的预期行为，如果输入的文本不正确(最后有空格)，则ngModel应该返回undefined。当您考虑这个问题时，如果根据您的验证结果不正确，为什么要将值保存到ngModel呢？

这是相关的bit：

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;