Javascript angularjs ng模式基于正则表达式条件更改元素的css样式

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

启发这一点的源模型来自

这是我根据正则表达式检查模式的函数：

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

但对于，这是不可能的。

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

我已经为第二种方法创建了JSFIDLE：

如果任何条件失败，则根据更新的问题表单进行的更新将无效，从而禁用提交按钮：

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

我已经为第二种方法创建了JSFIDLE：

---

如果任何条件失败，则根据更新的问题表单更新的内容将无效，从而禁用提交按钮：

答案真的很酷，但如果条件不满足，密码字段将变为红色呢？如果满足每个条件，然后清除密码字段，则会出现一个小错误，长度条件已检查！然而它是空的。@NarenMurali在输入字段上有ng类&基于这些条件属性布尔值，handle有错误。检查这个版本：@Shantanu是的，它看起来更好，可能有更多的css调整：@Bonnard检查我的更新答案。使用$setValidity手动处理此类输入的有效性。回答真的很酷，但是如果条件不满足，密码字段会变成红色呢？酷，但是有一个小错误，当您满足每个条件，然后清除密码字段时，长度条件会被检查！然而它是空的。@NarenMurali在输入字段上有ng类&基于这些条件属性布尔值，handle有错误。检查这个版本：@Shantanu是的，它看起来更好，可能有更多的css调整：@Bonnard检查我的更新答案。使用$setValidity手动处理此类输入的有效性。

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