title: Angular material reset form after submit
body: <p>I use angular material and I have a form with reactive validation.</p>
  
  <p>I want to reset my form after submitting, my issue is after submitting I see my errors appears in the form.</p>
  
  <p>input example :</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-label&gt;Prénom&lt;/mat-label&gt;
    &lt;input matInput name="prenom" formControlName="prenom"&gt;
    &lt;mat-error *ngIf="f.prenom.hasError('required') &amp;&amp; submitted"&gt;
      Ce champ est obligatoire
    &lt;/mat-error&gt;
    &lt;mat-error *ngIf="f.prenom.errors?.maxlength &amp;&amp; !f.prenom.hasError('required')"&gt;
      le prénom ne peut pas dépasser 20 caractères
    &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I tried to add a submitted variable and  this.myForm.markAsUntouched() but dosesn't work</p>
  
  <pre><code>onSubmit() {
    this.submitted = true;
    if (this.myForm.invalid) {
      return;
    }
    alert('Form Submitted succesfully!!!\n Check the values in browser console.');
    console.table(this.myForm.value);
    this.submitted = false;
    this.myForm.reset();
    this.myForm.markAsUntouched();
  }
  </code></pre>
  
  <p>With the submitted variable I see the message error disappear(the yellow section below) but not the border and red color.</p>
  
  <p><a href="https://i.stack.imgur.com/2aObL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2aObL.png" alt="enter image description here"></a> </p>
  
  <p>Do you guys have any ideas to solve that ?</p>