How to deal with double submit in Angular2

Question

If I click fast on my submit-button the form is submitted two or more times. My thought was to prevent this with the disabled attribute, but I need variable disableButon

Answer 1

This should work as well:

Submit

or just (click) instead of (ngSubmit)

update (see comments)

Submit

update (use a directive)

@Directive({
  selector: 'button[type=submit]'
})
class PreventDoubleSubmit {

  @HostBinding() disabled:boolean = false;

  @Input() valid:boolean = true;      

  @HostListener('click') 
  onClick() {
    if(!valid) {
      return;
    }
    this.disabled = true;
  }
}

and use it like

Submit

You need to add it to the directives: [PreventDoubleSubmit] of the components where you want to use it or alternatively provide it globally

provide(PLATFORM_DIRECTIVES, {useValue: [PreventDoubleSubmit], multi: true})