angularjs ng-pattern 根据正则表达式条件更改元素的 css 样式

Question

在我的 angularjs 表单中，我正在使用一个检查多个条件的正则表达式来检查密码模式。基于此正则表达式的不同条件检查，我想更改其中一个元素的 css。

Jsfiddle link Here .

灵感来自here的源模型。

这是我根据正则表达式检查模式的功能：

$scope.passPatternCheck= (function() {
    var regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!#\$%&'\(\)\*\+,\-\.\/:;\<=\>\?@\[\\\]\^_`\{\|\}~]?)[A-Za-z\d!#\$%&'\(\)\*\+,\-\.\/:;\<=\>\?@\[\\\]\^_`\{\|\}~]{8,}/;
    return {
        test: function(value) {               
            return regexp.test(value);
        }
    };
})();

一些注意事项：

• 此正则表达式不检查开始/结束空格；这也应该调整
• 显示/隐藏条件列表 div 的 ng-if 当前不起作用。

问题：

我想从 godaddy 站点帐户创建页面重现相同的行为。所以目标是根据完成的条件具有相同的 css 行为。

更新 2：

如果未填写任何必填字段或出现模式错误，我的表单theForm 的提交按钮应该被禁用：

<button type="submit" class="btn btn-primary"ng-disabled="theForm.$invalid" ng-click="submit()">
</button>

但是使用Shantanu's answer，这还不可能。

Answer 1

为ng-pattern 添加一个正则表达式将无法实现。因为如果正则表达式测试失败，那么我们将无法确切知道所有这些复选框条件中的哪种情况失败。您必须为每个条件处理不同的正则表达式并在自定义指令中检查它们（使用$validators）并为每个验证创建自定义验证器或您可以在更改密码输入字段时检查这些条件在控制器内部并创建一个具有不同属性的对象作为这些验证条件的布尔值。

我为第二种方法创建了 jsfiddle：http://jsfiddle.net/shantanu_k/Lnupw3p2/7/

根据更新的问题进行更新（如果任何条件失败，表单必须无效，从而禁用提交按钮）：http://jsfiddle.net/shantanu_k/Lnupw3p2/10/