title: Can the Angular Material ErrorStateMatcher detect when a parent form is submitted?
body: <p>I have a parent component that sets up a form and passes it down to a child component.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="form" (submit)="submit()"&gt;
    &lt;app-child [form]="form"&gt;&lt;/app-child&gt;
    &lt;button mat-button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The child component displays an input field like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field *ngIf="form" [formGroup]="form"&gt;
    &lt;input matInput
           placeholder="Email"
           formControlName="email"
           [errorStateMatcher]="matcher"
           required&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The input field is required and should show an error if the form is submitted without filling it in, even if the user never touched it. This is the automatic behavior in a simple form, but (I think) since I am using a child form, I have to implement custom error logic with <code>ErrorStateMatcher</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MyErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control, form) {
      return control &amp;&amp; control.invalid &amp;&amp; form &amp;&amp; form.submitted;
    }
  }
  </code></pre>
  
  <p>However, this doesn't work. I can't figure out how to get the child input to detect when the parent form has been submitted. The <code>ErrorStateMatcher</code> detects that something has changed, but the <code>submitted</code> property of <code>form</code> is always <code>false</code>. What am I doing wrong?</p>
  
  <p><a href="https://stackblitz.com/edit/angular-material-error-matcher-child-component" rel="nofollow noreferrer">See this Stackblitz</a></p>