javascript - 在多个条件下使用 ngclass

Question

我想根据函数的结果在跨度上设置 3 个不同类中的 1 个。我下面的 javascript 似乎返回了正确的值，但是我的标记始终显示“require-matched”类。我如何编写 ng-class 指令来适应这种情况？

HTML:

<span ng-class="{'require-empty': 0,
                                 'require-matched': 1,
                                 'require-not-matched':2 [form.username.$validators.status]}">
                </span>

JS:

ctrl.$validators.status = function (value) {
                var expression = /^[-\w]+$/;

                if (value != null && value != undefined && value != '' && value != ' ') {
                    if (expression.test(value))
                        return 1;
                    if (!expression.test(value))
                        return 2;
                }
                else {
                    return 0;
                }
}

Answer 1

这是 Angular 中验证的错误用法。 ctrl.$validators.status 应返回 bool 值:true 表示有效结果(在您的术语中为 required-matched)，false code> 否则(required-not-match)。如果验证无效，ngModelController 将收到 bool 标志，您可以在 View 中使用该标志来设置控件样式或显示错误消息。

require-empty 应该由 required 验证器处理，而不是让 status 验证器也执行此操作。

那么您可能想要什么:

ctrl.$validators.status = function(value) {
    if (value) {
        var expression = /^[-\w]+$/;
        return expression.test(value.trim());
    }
    return false;
}

或指令可以像

一样简洁

ctrl.$validators.status = function(value) {
    return value && /^[-\w]+$/.test(value.trim());
}

HTML 中的相应字段为(假设指令名称为 status):

<input type="text" name="test" ng-model="testModel" status required>

<div class="error" ng-show="testForm.test.$error.required">The field is required.</div>
<div class="error" ng-show="testForm.test.$error.status">The value should match pattern.</div>

演示: http://plnkr.co/edit/YALB4Vbi5FzNH5FCfwB5?p=preview