Какое состояние по умолчанию у флажка в angular?

Question

У меня проблема. В настоящее время я реализую форму с проверкой флажка. Проблема в том, что сообщение об ошибке видно после начальной загрузки, но должно быть видно только в том случае, если форма отправлена ​​без установленного флажка:

<div class="form-group">
  <mat-checkbox [formControl]="legalCheckbox" color="primary" required>
    I agree!
  </mat-checkbox>
  <mat-error *ngIf="legalCheckbox.invalid">{{getLegalCheckboxErrorMessage()}}</mat-error>
</div>

Это моя проверка:

legalCheckbox = new FormControl('', [Validators.requiredTrue]);

getLegalCheckboxErrorMessage() {
  if (this.legalCheckbox.hasError('required')) {
    return 'Checkbox is required';
  }
}

Я очень запутался, почему сообщение видно после начальной загрузки. У кого-нибудь есть идеи, почему?