Ya existe una pregunta similar pero no es lo mismo .
¿Necesito una solución global probablemente usando una directiva o lo que sea?
tengo forma
<form (submit)="onSubmit()"> <input type="text"> <button type="submit> </form>Ok, la solución para esto no se acepta para mi caso de uso:
submitted: false; onSubmit(){ this.submitted = true; }y poner en botón
[disabled]="submitted"Necesito una solución global... Empiezo pero no sé qué sigue...
@Directive({ selector: 'form' }) export class PreventSubmitFewTimesDirective implements OnInit { constructor( private formSelector: ElementRef, ) {} ngOnInit() {} @HostListener('submit') onSubmit(evt: KeyboardEvent) { .... // }Me dirijo a todos los formularios en el envío, pero necesito la mejor solución.
Lo que podrías hacer es lo siguiente:
// Targets every form with the 'disableAfterSubmit' directive, not every form (in case you want one or two forms not to have this behavior) @Directive({ selector: 'form[disableAfterSubmit]' }) export class PreventSubmitFewTimesDirective { constructor(private formSelector: ElementRef) {} @HostListener('submit') onSubmit(evt: KeyboardEvent) { // Get the submit button with a query selector const button = this.el.nativeElement.querySelector('button[type="submit"]'); // Disable it button.disabled = true; }Tenga en cuenta que con esta solución, no hay forma de volver a habilitar el botón Enviar.
No creo que una solución global sea el mejor enfoque, pero si realmente tiene que hacerlo, intentaría guardarlo en el almacenamiento local y luego leerlo. todavia no lo recomendaria..