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

【问题标题】：Angular2 - model driven forms using CSS ng-valid styling breaksAngular2 - 使用 CSS ng-valid 样式中断的模型驱动表单
【发布时间】：2017-05-04 13:22:41
【问题描述】：

Template Driven forms here 的 angular2 教程使用以下 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

知道如何让它工作吗？

【问题讨论】：

您的 plunkr 充满了错误。检查控制台
谢谢，错误已修复

标签： angular css-selectors angular2-template angular2-forms

【解决方案1】：

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

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

Plunkr with fix.

【讨论】：