ng-invalid 样式的 ngTagsInput 问题
ngTagsInput issue with ng-invalid style
我正在使用 https://github.com/mbenford/ngTagsInput。
我创建了一个带有 url 和一个必需的标签输入字段的基本表单。
因为它是必需的,所以我使用了属性 min-tags="1"
我将它与 bootstrap stylehseet 结合使用。
显示时,该字段会出现红色阴影边框(因为它是空的),甚至在提交任何表单之前也是如此。这真的很烦人,有什么解决方法吗?
- 仅在提交表单后验证字段?
- 删除 min-tags="1" 并找到另一种方法来检查所需的方面。
- 使用 css 丢弃应用于此 .ng-invalid .tags 的那些样式
谢谢
编辑:
示例代码:
<tags-input min-tags="1" ng-model="mytags"></tags-input>
做过一个plunker : http://plnkr.co/edit/EQcYfr4vLpkeJESho3GL?p=preview
您可以简单地使用自定义 class 来处理原始状态:
CSS
.custom-tags.ng-pristine .tags {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
border: 1px solid #ccc
}
HTML
<tags-input min-tags="1" ng-model="mytags" class="custom-tags"></tags-input>
此外,Angular 1.3 尚未得到官方支持。这在这里尤为重要,因为如果您使用该版本的框架,则不会正确设置原始状态和脏状态。
我正在使用 https://github.com/mbenford/ngTagsInput。
我创建了一个带有 url 和一个必需的标签输入字段的基本表单。
因为它是必需的,所以我使用了属性 min-tags="1"
我将它与 bootstrap stylehseet 结合使用。
显示时,该字段会出现红色阴影边框(因为它是空的),甚至在提交任何表单之前也是如此。这真的很烦人,有什么解决方法吗?
- 仅在提交表单后验证字段?
- 删除 min-tags="1" 并找到另一种方法来检查所需的方面。
- 使用 css 丢弃应用于此 .ng-invalid .tags 的那些样式
谢谢
编辑: 示例代码:
<tags-input min-tags="1" ng-model="mytags"></tags-input>
做过一个plunker : http://plnkr.co/edit/EQcYfr4vLpkeJESho3GL?p=preview
您可以简单地使用自定义 class 来处理原始状态:
CSS
.custom-tags.ng-pristine .tags {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
border: 1px solid #ccc
}
HTML
<tags-input min-tags="1" ng-model="mytags" class="custom-tags"></tags-input>
此外,Angular 1.3 尚未得到官方支持。这在这里尤为重要,因为如果您使用该版本的框架,则不会正确设置原始状态和脏状态。