Angular2 - 使用 CSS ng-valid 样式中断的模型驱动表单

Question

模板驱动表单的 angular2 教程 here 使用以下 CSS：

.ng-valid[required], .ng-valid.required {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form) {
  border-left: 5px solid #a94442; /* red */
}

这是一个不错的样式指示器，但如果您将它用于域驱动表单，则只有红色状态 (ng-invalid) 有效。一旦必填字段有效，它就不会变成绿色。

Plunkr

知道如何让它工作吗？

Answer 1

在 Stefan 的回答帮助下，问题解决了：

.ng-valid:not(form), .ng-valid.required {
  border-left: 5px solid #42A948; /* green */
}

Plunkr with fix.

Angular2 - 使用 CSS ng-valid 样式中断的模型驱动表单

Angular2 - model driven forms using CSS ng-valid styling breaks

css-selectors

angular2-forms

angular2-template

angular