嵌套FormGroup的FormControl是ng-valid虽然FromGroup是ng-invalid

Question

我有一个名为'grade'的嵌套表单组：

虽然嵌套表单组“成绩”应用了ng-invalid类，但子表单控件确实应用了ng-valid类。

为什么失效不会从嵌套表单继承到其控件？

this.schoolyearForm = this.formBuilder.group({
  name: [this.createSchoolyear.name, [Validators.minLength(3), Validators.required]],
  endDate: [this.createSchoolyear.endDate, Validators.required],
  startDate: [this.createSchoolyear.startDate, Validators.required],
  grades: this.formBuilder.group({
    bestGrade: [this.createSchoolyear.bestGrade, Validators.required],
    worstGrade: [this.createSchoolyear.worstGrade, Validators.required]
  }, { validator: this.gradesCompare })
});


  gradesCompare(c: AbstractControl): { [key: string]: boolean } | null
  {
    let bestGradeControl = c.get("bestGrade");
    let worstGradeControl = c.get("worstGrade");

    if (bestGradeControl.pristine || worstGradeControl.pristine)
      return null;

    if (bestGradeControl.value === worstGradeControl.value)
    {
      return { "match": true };
    }
    return null;
  }

查看红色和绿色边框：

在FormControl上是未应用的css ng-invalid类：

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

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

因此它们是绿色的，但我希望它们是红色的！

更新

我将用户Ben的plunkr改为了这个：

https://plnkr.co/edit/VobcC0Qw1EBDytYdkzru?p=preview

它的工作原理我希望它能起作用，但对我来说似乎是一种解决方法。多个ng-class表达式很难理解......

请Ben把这个plunkr当作你的，把它作为解决方案发布，但只有你诚实地认为你也会对解决方案感到满意。如果没有尝试找到更好的解决方案，请完全了解我的要求。

其他人也欢迎加入这一挑战，现在你知道验证/ ui /错误消息应该如何表现。