en mi aplicación, el usuario tiene múltiples entradas, y uso @hostListener para hacer clic afuera, porque tengo algunas entradas complicadas (múltiples casillas de verificación donde primero necesito verificar todo y después de la llamada se envía al hacer clic afuera, IMG-MAP, etc.) ..).
--- TEXT INPUT --- *add some value...* -> click outside -> Submit --- RADIO BUTTON --- *change option...* -> click outside -> Submit ...etc ¿Cómo en angular 9+ evitar que los usuarios hagan clic en cualquier lugar (menú, otra entrada ...)? Si el usuario cambia el valor y hace clic en cualquier lugar o en cualquier otra parte de la aplicación (cualquier botón, elemento de menú, otra entrada), se debe ejecutar el método de submit para la entrada modificada en lugar de donde hizo clic.
Intento agregar event.PreventDefault() , pero si hacemos clic en el menú o en otro botón, no se activa submit for changed value , es un método activado para el elemento en el que se hizo clic (elemento del menú...).
@HostListener('document:click', ['$event']) clickOut(event) { event.preventDefault(); // if change val in text input and click directlly on radio button option, radio button option i changed and trigered submit for text input, and that is not ok, option in radio butoon can't be changed this.submit() }¿Por qué no usar (blur) ?
Otra idea puede ser obtener event.target as HTMLElement; y verifique si está dentro de su formulario para no ejecutar event.PreventDefault ()
@ViewChild('myForm',{read:ElementRef}) formElement:ElementRef @HostListener('document:click', ['$event']) clickOut(event) { const clickTarget = event.target as HTMLElement; if (this.formElement.nativeElement.contains(clickTarget)) { console("inside myForm") } else { console("outside myForm") } }NOTA: No reviso el código (tengo prisa), pero me imagino trabajo