ExpressionChangedAfterItHasBeenCheckedError when using ReactiveForms and NgbModal

Question

I have a reactive form and when the user presses the ESC key in an input i would like to show an "are you sure" modal before the form gets hidden.
As soon as the modal is shown i get the following exception in the console:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'ng-untouched: true'. Current 
value: 'ng-untouched: false'.

Here is a stackblitz that shows the issue (focus input and press ESC)

Note: When you focus the input, blur and focus again the issue wont appear as ng-untouched wont change again.

Is there any workaround? Whats the recommended way to implement such a functionality?

Thanks in advance!

Answer 1

I finally found a way to overcome the issue but still having the dirty flag maintained.

ng-untouched is maintained onBlur when FormControl is set to {updateOn:'change'} (the default). What you have to do is simply blur the input manually before opening the modal. When the modal is shown it will blur anyway.

Here is a stackblitz

Answer 2

Try this:

this.form = new FormGroup({
  test: new FormControl('',{updateOn:'submit'})
})