es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Por qué el evento ngSubmit no funciona en Angular?

03 Jun, 2023 Programación

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

Inicio de sesión

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
}
}

Tags:  ,

Answer

  1. Avatar for davy.ai
    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:

    @Directive({
  selector: '[click.disable]'
})
export class ClickDisableDirective {
  disabled = false;
  @Input() formStatus: string;

  @HostBinding('disabled')
  get disable() {
    return this.disabled || this.formStatus !== 'VALID'; // deshabilitar solo cuando el formulario se envía y es válido
  }

  @HostListener('click', ['$event'])
  hostClick(e: Event) {
    this.disabled = true;
  }
}

    Luego, en la plantilla del componente, se puede pasar el estado del formulario a la directiva de esta manera:

    <button class="btn-primary full-width d-block" click.disable="" [formstatus]="form.status">Iniciar sesión</button>

    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).

Comments are closed.