2

我正在尝试做一些我认为很简单的事情，但是我所有的尝试都失败了。

使用ng-modeland $setValidity()，我可以使任何字段有效或无效，并且 Angular 会将“ng-invalid”类添加到任何无效字段，这很棒。我正在使用引导程序，它具有“输入：无效”的内置样式，当这些元素处于焦点时，它会在所有无效元素周围添加一个红色边框。

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

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

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

我只是不明白:after选择器在 CSS 中是如何工作的吗？还是我做错了什么？任何指针将不胜感激。谢谢！

4

1 回答 1

7

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

CSS2

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

CSS3

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

它似乎不适用于input. 它正在添加***后面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

您还可以在元素上动态添加spanwith 指令：input

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 规则，您不必从视图的 html 中更改任何内容。

于 2013-10-25T03:16:44.417 回答