title: Trigger Angular animation on form error
body: <p>I am trying to give the user a visual feedback when he tries to send a form with a wrong input. Therefore I want to animate the input field when he tries to send the form if it contains errors.</p>
  
  <p><strong>The animation in the ts file:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>trigger('error', [
        transition('* =&gt; *', useAnimation(shake)),
        ]),
  </code></pre>
  
  <p><strong>The form in the html file:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field [@error]="error"&gt;
  </code></pre>
  
  <p>Is it possible to trigger this animation each time the user tries to send the form and it contains errors?  </p>
  
  <p><a href="https://stackblitz.com/edit/angular-material2-list-form-animation?file=app/form-field-overview-example.ts" rel="nofollow noreferrer"><strong>StackBlitz example (Updated with solution)</strong></a></p>
  
  <p>As you can see the shake animation is played in the beginning and then not anymore.</p>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>From the below answer i changed the order of setting the <code>onAddErrAnim</code> variable. Now <code>onAddErrAnim</code> is set to <code>false</code> first and then the <code>if</code> statement is called inside a <code>setTimout</code> with 0 milliseconds. Now the user can call <code>onAdd()</code> every millisecond and the animation is played to the end (if no new animation is triggered).</p>
  
  <pre class="lang-js prettyprint-override"><code>onAdd() {
    this.onAddErrAnim = false;
  
    setTimeout( () =&gt; {
  
      if (this.myFormControl.invalid) {
        this.onAddErrAnim = true;
        return;
      } else {
        this.myArray.unshift([this.inputExample]);
      }
  
    }, 0 )
  
  }
  </code></pre>