Использование ng-класса с множественными условиями

Question

Я хочу установить 1 из 3 разных классов в диапазоне, основанный на результате функции. Кажется, что мой javascript возвращает правильное значение, однако моя разметка всегда показывает класс с требованием соответствия. Как я могу написать директиву 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

Это неправильное использование проверки в Угловом. ctrl.$validators.status должен возвращать значение boolean: true для действительного результата (required-matched в вашей терминологии) и false в противном случае (required-not-match). В случае недействительной проверки ngModelController получит булевский флаг, который вы можете использовать для управления стилем или показать сообщение об ошибке.

require-empty что вы должны обработать required валидатор вместо того, чтобы делатьвалидатор сделать это также.

Так что вы, вероятно, хотите иметь:

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> 

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