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

Question

The angular2 tutorial for Template Driven forms here uses the following CSS:

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

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

It's a nice style indicator but if you use it for a Domain Driven form, only the red state (ng-invalid) works. Once a required field is valid, it does not turn green.

Plunkr

Any idea how to get this to work?

Answer 1

After help from Stefan's answer, this solves the issue:

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

Plunkr with fix.