AngularJS:仅使用 CSS 向无效字段添加指示符

Question

我正在尝试做一些在我脑海中非常简单的事情，但我所有的尝试都失败了。

使用 ng-model和 $setValidity() ，我可以使任何字段有效或无效，angular 会将“ng-invalid”类添加到任何无效字段，这很棒。我正在使用 bootstrap，它具有“input:invalid”的内置样式，当这些元素处于焦点时，它会在所有无效元素周围添加一个红色边框。

我的问题是我想添加一个 ***在我的表单中每次输入无效后，用户可以快速查看哪些字段需要修复。我认为我可以通过执行以下操作仅使用 CSS 来做到这一点:

input.ng-invalid{
    border: 2px solid red; 
}
input.ng-invalid:after{
    content: '***';
}

我有一个 plunker 演示了这个 here 的一个简单示例.示例 <input>是必需的，因此如果您只是从字段中删除文本，它会立即变为无效并获得一个大的红色边框。但它没有得到 content: '***';风格。

我只是不明白:after是怎么来的选择器在 CSS 中有效吗？还是我做错了什么？任何指针将不胜感激。谢谢!

Answer 1

删除选择器中的 input 在你的 plunker 中对我有用。

CSS2

.ng-invalid:after {
  content: '***';
}

CSS3

.ng-invalid::after {
  content: '***';
}

它似乎不适用于输入。它在 form 之后添加 ***，它也有 ng-invalid 类。请参阅其他答案:https://stackoverflow.com/a/4660434/1036025

编辑 1

你可以做这样的事情，但它需要在你的输入旁边有一个容器标签:

html

<input type="text" placeholder="This field is required" ng-model="myVal" required="" class="my-input" />
<span></span>

CSS

input.ng-invalid + span::after {
  content: '***';
}

编辑 2

您还可以在 input 元素上使用指令动态添加 span:

app.directive('input', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      elem.after("<span></span>");
    }
  }
});

或者在required属性上(我建议使用ng-required):

app.directive('required', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      elem.after("<span></span>");
    }
  }
});

这样做，结合 css 规则，您不必更改 View 的 html 中的任何内容。