title: Display Angular Material mat-error in wrapper
body: <p>How can I properly display <code>&lt;mat-error&gt;</code> in a container without breaking the layout?</p>
  
  <p>The background is this: I use a lot of basic validators in my template driven forms (<code>required</code>, <code>minlength</code>, <code>pattern) and want to display the corresponding error message.</code>mat-form-field<code>only supports the display of one</code>mat-error` at a time, and for every message I need to display a human readable error message. So every input will look something like this:</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;input matInput required minlength="4" pattern="…"&gt;
    &lt;mat-error *ngIf="field?.errors?.required"&gt;Field is required&lt;/mat-error&gt;
    &lt;mat-error *ngIf="field?.errors?.minlength"&gt;Must be at least {{ field!.errors!.minlength.requiredLength }} characters&lt;/mat-error&gt;
    &lt;mat-error *ngIf="field?.errors?.pattern"&gt;Does not match pattern {{ … }}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I have to do this for every field. Seems pretty redundant!</p>
  
  <p>I have tried several approaches for extracting this pattern from the template:</p>
  
  <ul>
  <li>Component</li>
  <li><code>*ngFor</code></li>
  <li><code>&lt;ng-container&gt;</code></li>
  <li><code>&lt;ng-template&gt;</code></li>
  </ul>
  
  <p>However, they all mess up the layout, the error is then sort of displayed within the input field. I assume the issue is that <code>mat-error</code> needs to be a direct descendant of <code>mat-form-field</code> and all my approaches add an extra element between <code>mat-error</code> and <code>mat-form-field</code>.</p>
  
  <p>So how can I handle errors without having to write all the <code>mat-error</code> lines for every input?</p>