Angular directive not updating ngModel

Question

I created a custom directive for telephone number mask (eg: 123-234-4566). My input box have minlength and maxlength 12. If I copy paste a 10 digit number in the element, The directive updated the element but not the model. So the class in the element shows ng-invalid.

Note: If we type the number then no Issues (copy paste 10 digit number is an Issue)

https://stackblitz.com/edit/angular-ivy-crbdhl?file=src%2Fapp%2Ftest.directive.ts

Do anyone know how to update model from directive with new formatted value?

this.ngControl.valueAccessor.writeValue(newVal);