使用glyphicon和CSS标记必填字段

Question

在我们的AngularJS应用程序中，我们动态设置必填字段（ng-required）。因此，每次需要添加一个*到标签中变得相当复杂。

现在我们有另一个想法。可能可以将输入字段本身标记为必填项。在this post中，我们找到了部分解决方案。

有一些CSS选择器用于必填字段，因此我们可以像这样设置背景图片：

input:required:valid {
  background-image: url(valid.png);
  background-position: right center;
  background-repeat: no-repeat;
}
input:required:invalid {
  background-image: url(invalid.png);
  background-position: right center;
  background-repeat: no-repeat;
  -moz-box-shadow: none;
}

<p>Name:</p>
<input type="text" name="name" required />

但是这种方法需要一个*的背景图像，这似乎非常繁琐。特别是，如果表单有不同的大小，则图像具有不同的分辨率。

然后我们发现了this (标记为)的示例，似乎可以将文本添加到输入字段中。

所以问题是，如何将所有内容组合在一起，以便在需要时将Twitter-Bootstrap的glyphicon放置在输入字段的右侧，而无需编辑所有表单？

这里有一个jsFiddle。那可能有效，但问题是，background-size并不是在所有地方都支持。

- waXve

---

这个问题已经在这里得到了回答：将Bootstrap图标添加到输入框 - Carlos Man

这里的整个问题是：“因为它相当复杂...我们正在尝试其他方法”。你们试图避免什么样的复杂情况？ - New Dev

@CarlosMan：谢谢你的回答，但是那样我就得编辑所有的表单。使用CSS类可能可以在不编辑所有表单的情况下添加*。 - waXve

如果您将上面提供的答案参考中所呈现的选项之一（例如“使用Bootstrap”）转换为指令，以便为您生成“form-group”，那么它将非常适合您的用例。这样，您就可以兼顾两者的优点。 - Carlos Man

将指令的属性设置为条件，并在包含 glyphicon 或 fontawesome 图标的标签（<i> 或 <span> 等）的 ng-show 或 ng-if 中使用该条件（取决于这些模板是否动态编译）。 - Carlos Man

Answer 1

选项1

如Angularjs required asterisks中所述，您可以像这样添加一个指令来设置required属性：

var app = angular.module('stack', []);

app.directive("required", function() {
    return {
        restrict: 'A', // only for attributes
        compile: function(element) {
            // insert asterisk after elment 
            element.after("<span class='required'>*</span>");
        }
    };
});

.required {
  color: red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>

<div ng-app="stack">
  
  <input type="text" required />
  
</div>

选项 2

如使用 CSS 自动向表单输入框添加“必填字段”星号所述，使用背景图片也完全可以：

input[required], 
select[required]{
    background-image: url('http://i.imgur.com/zEIWMh4.png');
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 45px;
}

<label>Name</label>
<input type="text" required /><br/>

注意：你不能使用input:after在输入框后面创建伪元素，因为:before和:after"作为子元素呈现在容器内部，而input不能包含其他元素，因此不支持。"

- KyleMit