Alternate @for solution w/Pipes

@Naren Murali has some great info on his issue link regarding the issue of nested @if or @for constructs within templates. <mat-error> is problematic because it's moved within the DOM in order to render it "beneath" the MaterialFormField outline boundaries instead of inside of it.

As for addressing this...I put a 3rd example together in the following Stackblitz for how a pipe can be used to conditionally handle scenarios like touched, submitted, and using @for to loop through the list of errors as well as customize the displayed error message.

Stackblitz @for <mat-error> with Angular Pipe

As a side note: For performance reasons it's also preferential to use pipes and not a getErrorMessages( ) call that is always executed for any change-detection cycle.