Запускать проверку при открытии следующей расширяющейся матовой панели в угловом?

Question

У меня есть три расширительных панели, каждая из которых имеет угловую форму. Когда страница загружается, первая панель по умолчанию раскрывается, а две другие находятся в свернутом состоянии. Внизу страницы у меня есть кнопка отправки, которая отправляет все три формы.

<mat-accordion [multi]="true" [togglePosition]="'before'">
<mat-expansion-panel class="mat-elevation-z0" [expanded]="'true'">
  <form [formGroup]="stepOne">
     With mandatory fields. 
  </form>
</mat-expansion-panel>

<mat-expansion-panel class="mat-elevation-z0">
  <form [formGroup]="stepTwo">
     With mandatory fields. 
  </form>
</mat-expansion-panel>

<mat-expansion-panel class="mat-elevation-z0">
  <form [formGroup]="stepThree">
     With mandatory fields. 
  </form>
</mat-expansion-panel>
</mat-accordion>

<button mat-raised-button type="submit">OK</button>

Итак, есть ли способ запустить проверку для первой формы и установить грязную форму первой панели, когда пользователь пытается развернуть вторую панель расширения?

Причина: это может быть плохой UX, если пользователь видит все сообщения об ошибках, когда нажимает кнопку отправки, которая находится внизу экрана.