Disable Reactive Form Validation when modal is closed

Question

I have used a reactive form within a bootstrap modal. When The input is touched the form performs validation.However when I click the x to close the form and the field is touched it performs the validtion and I see the error message and then the form is closed. I understand that the validation happens because the field got touched and lost focus when it's invalid but, I don't want It to perform the validation when I close the form. I don't want to use dirty, because I need that validation when the form is open.How can I overcome this issue? here is my field:

<div *ngIf="(direction.dirty || direction.touched)">
   <!-validation error here->
</div>

Answer 1

I would implement an async validator for your field that does validation after a delay using setTimeout or something like it. It would also depend on some flag that prevents validation if it's set.

Then close button handler would enable that setting for the field.

This way we ensure that close handler is executed before validation logic and flag is set when validation is performed.