javascript - Angular JS 验证

Question

我正在尝试验证我的文本区域:

<form id="contact_form" name="contactform" ng-submit="submit(contactform)" role="form">
    <textarea class="form-control" id="Message" ng-model="formData.message" ng-trim="false" placeholder="Your message" required="required" rows="8"></textarea>
</form>

为了最大字数，所以我添加了一个过滤器:

app.filter('wordCounter', function () {
  return function (value) {
    if (value && typeof value === 'string') {
        return value.trim().split(/\s+/).length;
    } else {
        return 0;
    }
  };
});

当满足这个过滤器时，我打印出一个错误:

<span class="help-block" ng-show="(formData.message|wordCounter) > 200">
  Max 200 words please!
</span>

但是当我检查我的 Controller 时 contactform.$valid 始终是 true，如果过滤器 wordcounter 超过 200，我如何使表单无效？

Answer 1

您需要创建自定义验证指令。使用 Angular 1.3 $validators这很容易。

比如简单的一个:

.directive('maxWords', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {
            ngModelController.$validators.maxWords = function(viewValue, modelValue) {
                if (!ngModelController.$isEmpty(modelValue)) {
                    return modelValue.trim().split(/\s+/).length <= attrs.maxWords;
                }
            };
        }
    };
});

演示: http://jsfiddle.net/m3pp71o4/