My custom directive is designed to prevent a double click on the submit button:
import { Directive, Component, OnInit, AfterViewInit, OnChanges, SimpleChanges, HostListener, ElementRef, Input, HostBinding } from '@angular/core';
@Directive({
selector: 'button[type=submit]'
})
export class PreventDoubleSubmit {
@HostBinding() disabled:boolean = false;
@Input() valid:boolean = true;
@HostListener('click')
onClick() {
console.log("aaa");
this.disabled = true;
}
}
This directive is then incorporated into a shared module:
import { NgModule } from '@angular/core';
import { PreventDoubleSubmit } from '../shared/prevent-double-submit.directive';
@NgModule({
declarations: [
PreventDoubleSubmit
],
exports: [
PreventDoubleSubmit
]
})
export class SharedModule{}
Upon implementing this in the app.module, I noticed that when clicking on the button for the first time, it gets correctly disabled. However, the original actions associated with the form no longer execute. It seems like the directive has taken precedence and is preventing any other action from occurring.
The form tag being used is:
<form (ngSubmit)="onSubmit(f)" #f="ngForm" class="generalForm"></form>
In the corresponding TypeScript file, the code simply consists of:
onSubmit(form: NgForm) {
console.log("This is the code I want to perform");
}