title: Angular prevent multiple form submissions
body: <p>I would like to prevent users from being able to submit forms multiple times in my application. I built a directive that will disable the button once it has been clicked which works fine, however the button stays disabled when the form submission fails and I'm not sure how to resolve that.</p>
  
  <p>The problem scenario: A user fills out the form and clicks submit. The button is disabled to prevent additional clicks. <code>ngSubmit</code> makes a <code>GET</code> request to an API which returns a response with a code outside of the 200's. My code will then look at the error, determine what went wrong, and set validation errors on the form so the user can correct the issue then try again. </p>
  
  <p>However the directive has no idea what happened after the button was disabled and has no way of knowing it needs to be enabled now to allow the user to submit the form again.</p>
  
  <pre><code>@Directive({
    selector: '[appPreventDoubleClick]'
  })
  export class PreventDoubleClickDirective {
    private alreadyClicked = false;
  
    constructor(
      private elementRef: ElementRef
    ) { }
  
    @HostListener('click', [ '$event' ]) onClick(event: MouseEvent): void {
      this.handleClick(event);
    }
  
    private handleClick(event: MouseEvent): void {
      if (this.alreadyClicked) {
        event.preventDefault();
      } else {
        this.alreadyClicked = true;
      }
    }
  }
  </code></pre>