反应式角度为6的复选框验证问题

Question

如何以反应形式验证复选框。我确实做到了，但是面临一个小问题。在我的代码中，我得到了未选中复选框的红色标签文本。但是在选中复选框之后，直到现在红色才变成了复选框。解决这个问题？

app.component.css：

.ng-invalid{
  color:red; 
}

app.component.ts：

function selectedallCheckboxes() {
  const validator: ValidatorFn = (formArray: FormArray) => {
    const totalSelected = formArray.controls
      .map(control => control.value)
      .reduce((prev, next) => next ? prev + next : prev, 0); 
      return totalSelected >= formArray.length ? null : { required: true };
  }; 
  return validator;
}

演示：https://stackblitz.com/edit/angular-6d7u86?file=src%2Fapp%2Fapp.component.ts