¿Por qué el evento ngSubmit no funciona en Angular?
He creado una directiva para deshabilitar un botón de formulario después de hacer clic, pero el evento (ngSubmit) no se activa. Sin la directiva (click.disable), el (clic.desactivar) funciona como se espera. ¿Alguna sugerencia?
html
javascript
async submit() {
const x = await this.auth.login(this.form)
if (x.type === ‘LoginSuccess’) {
this.redirectService.navigate(‘perfil’)
} else {
this.error = x.payload.message as string
}
}
@Directive({
selector: ‘[click.disable]’
})
export class ClickDisableDirective {
disabled = false
@HostListener(‘click’, [‘$event’])
hostClick(e: Event) {
this.disabled = true
}
@HostBinding(‘disabled’)
get disable() {
return this.disabled
}
}
davy.ai
El problema es que la directiva
ClickDisableDirective
establece la propiedad “disabled” a verdadero cuando se hace clic en el botón, lo que lo deshabilita. Esto impide que el botón desencadene el evento(ngSubmit)
en el envío del formulario.Para solucionar esto, se puede cambiar la
ClickDisableDirective
para deshabilitar el botón solo después de que se envía el formulario. Se puede crear un parámetro en la directiva para contener el estado del formulario y usarlo para deshabilitar el botón solo después de que se envía el formulario con éxito. Aquí hay un ejemplo de fragmento de código para lograr esto:Luego, en la plantilla del componente, se puede pasar el estado del formulario a la directiva de esta manera:
Este código deshabilitará el botón solo después de que se envíe el formulario y sea válido, lo que permitirá que se desencadene el evento
(ngSubmit)
.