Css 如何使用ng模式编辑输入样式

我做了一个小广告

我还将代码添加到堆栈溢出代码段，但由于某些原因，它对我不起作用

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.my_model=''
$scope.my_regex='/^[A-Za-z]+（\，[A-Za-z]+）*$/'；
$scope.my_占位符='write something'；
}

。无效输入[name=my\u input]{
边框：2倍纯红；
}
输入[名称=我的输入]{
边框：2件纯蓝；
}

---

如果

ng模式

失败，这意味着未满足正则表达式，则类

ng无效模式

将添加到

元素中。这意味着您应该能够使用以下CSS将红色边框添加到未通过

ng模式的输入字段中：

input[name=my_input].ng-invalid-pattern{
    border: 2px solid red;
}

如果
ng模式
失败，这意味着未满足正则表达式，则类
ng无效模式
将添加到
元素。这意味着您应该能够使用以下CSS将红色边框添加到未通过
ng模式的输入字段中：

input[name=my_input].ng-invalid-pattern{
    border: 2px solid red;
}

试试这个



试试这个


在您的代码段中，
（）*，（）*[a-zA-Z]+）*
正则表达式无效。您可以测试您的正则表达式或其他在线工具。在这里，我尝试使用简单的数字正则表达式，它工作得很好


函数formCtrl（$scope）{
$scope.my_model='test，dfsdf，dfs'
$scope.my_占位符='write something'；
$scope.my_pattern=“//^[A-Za-z]+（\，[A-Za-z]+）*$/”；//这里替换您想要的正则表达式
}
。无效{
边框：2倍纯红；
}
.有效{
边框：2件纯蓝；
}

不是有效的输入！
在您的代码段中，
（）*，（）*[a-zA-Z]+）*
正则表达式无效。您可以测试您的正则表达式或其他在线工具。在这里，我尝试使用简单的数字正则表达式，它工作得很好


函数formCtrl（$scope）{
$scope.my_model='test，dfsdf，dfs'
$scope.my_占位符='write something'；
$scope.my_pattern=“//^[A-Za-z]+（\，[A-Za-z]+）*$/”；//这里替换您想要的正则表达式
}
。无效{
边框：2倍纯红；
}
.有效{
边框：2件纯蓝；
}

不是有效的输入！
我试图通过删除ng类并添加u建议的样式来编辑JSFIDLE，但仍然不起作用，您也可以尝试一下吗？@Koop4您的正则表达式有问题，我尝试了一个基本正则表达式
/[a-Z]/
，它可以工作。嗯，正则表达式似乎可以工作，我甚至试过使用
[a-zA-Z]+（*，*[a-zA-Z]+）*
似乎不起作用的是使用控制器提供正则表达式。“有人知道我们做错了什么吗？”Koop4为你写了一个新的正则表达式。希望没问题<代码>/^[A-Za-z]+（\，[A-Za-z]+）*$/
正在运行：使用regex它可以工作，但从模式使用它却不行，甚至使用RegExp构造函数也不行。我遗漏了什么吗？Edit，，我使用了前面的正则表达式，因为您不接受字符串和逗号之间的空格。这是正确的JSFIDLE，我试图通过删除ng类并添加u建议的样式来编辑JSFIDLE，但仍然不起作用，您也可以尝试一下吗？@Koop4您的正则表达式有问题，我尝试使用基本正则表达式
/[a-Z]/
，它可以工作。嗯，正则表达式似乎可以工作，我甚至试过使用
[a-zA-Z]+（*，*[a-zA-Z]+）*
似乎不起作用的是使用控制器提供正则表达式。“有人知道我们做错了什么吗？”Koop4为你写了一个新的正则表达式。希望没问题<代码>/^[A-Za-z]+（\，[A-Za-z]+）*$/

正在运行：使用regex它可以工作，但从模式使用它却不行，甚至使用RegExp构造函数也不行。我遗漏了什么吗？Edit，，我使用了前面的正则表达式，因为您不接受字符串和逗号之间的空格。这是正确的JSFIDLE，您期望的结果是什么？我根据您的正则表达式更新了我的答案，当模式不匹配时，伪文本inputborder应该是红色的。应该从控制器使用模式模式模式应该只允许用逗号分隔的字符串。字符串和逗号之间允许有空格您期望的结果是什么？我根据您的正则表达式更新了我的答案，当模式不匹配时，伪文本输入边框应该是红色的。应该从控制器使用模式模式模式应该只允许用逗号分隔的字符串。字符串和commas@Koop4也许这个解决方案能帮你解决你的问题。这确实有效，但我真的不喜欢它！css样式中的重要信息。@Koop4我刚刚更新了代码，正如您所说，我从css样式中删除了重要信息。我希望，这是有帮助的。@Koop4可能是这个解决方案帮助你解决你的问题。这确实有效，但我真的不喜欢它！css样式中的重要信息。@Koop4我刚刚更新了代码，正如您所说，我从css样式中删除了重要信息。我希望，这会有帮助。我没有尝试过，但我的目标是从范围内获得ng模式。我编辑了我的正则表达式，因为它是错误的复制粘贴之前，请随意编辑您的片段。谢谢，我没有试过，但我的目标是从scope获得ng模式。我编辑了我的正则表达式，因为它是错误的复制粘贴之前，请随意编辑您的片段。谢谢