in my app, the user has multiple inputs, and I use @hostListener for click outside, because I have some complicated inputs (multiple checkboxes where I first need to check everything and after call submits on click outside, IMG-MAP, etc....).
--- TEXT INPUT ---
*add some value...*
-> click outside -> Submit
--- RADIO BUTTON ---
*change option...*
-> click outside -> Submit
...etc
how to in angular 9+ prevent users to click anywhere (menu, another input ...)? If the user change the value and click anywhere or on any other part of the app ( any button, menu item, another input) submit method for changed input needs to be executed instead of that where he clicked.
I try to add event.PreventDefault(), but if we click on the menu or on another button it is not triggered submit for changed value, it is a triggered method for clicked item (menu item...).
@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()
}
why not use (blur)?
Another idea can be get the event.target as HTMLElement; and check if is inner to your form to not execute 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")
}
}
NOTE: I don't check the code (I'm in hurry), but I imagine work