ng-tags-input - ng-invalid 样式的 ngTagsInput 问题

Question

我正在使用https://github.com/mbenford/ngTagsInput。
我创建了一个带有 url 和必需的标签输入字段的基本表单。因为它是必需的，所以我使用了属性 min-tags="1"

我将它与 bootstrap stylehseet 结合使用。

显示时，该字段显示为带有红色阴影边框（因为它是空的），甚至在提交任何表单之前。这真的很烦人，有什么解决方法吗？

1. 仅在表单提交后验证字段？
2. 删除 min-tags="1" 并找到另一种检查所需方面的方法。
3. 使用 css 丢弃应用于此 .ng-invalid .tags 的那些样式

谢谢

编辑：示例代码：

<tags-input min-tags="1" ng-model="mytags"></tags-input>

做了一个plunker：http ://plnkr.co/edit/EQcYfr4vLpkeJESho3GL?p=preview

Answer 1

您可以简单地使用自定义类来处理原始状态：

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 还没有得到官方支持。这在这里特别重要，因为如果您使用该版本的框架，原始状态和脏状态都不会被正确设置。