Applying validation class ng-valid delayed for one step after real real state change

I have two input controls in reactive form on the page (see sample). Both should be valid when content only 4 chars long. When I edit “hidden control” it fills other control (“PIN code”) with new masked value with following code:

pinControl.valueChanges.subscribe((value: string) => {
  this.pinVisibleControl.setValue(new Array(value.length).fill('*').join(''));
  this.pinVisibleControl.markAsTouched({ onlySelf: true });
  console.log(`PIN visible status: ${this.pinVisibleControl.status}`);

The problem is the validation state classes (ng-valid particularly) are applied to “PIN code” not right after change of control value, but only in next change cycle (when I enter fifth letter). So green valid indicator on “PIN code” appears only after next change (usually when it contains 3 or 5 letters).
Any suggestion how to apply validation classes right after value change?

Why are you going to such lengths to reinvent the password input type?

Well, I need 4 digit password input. Since it will be used on mobile device, “password” input will open alphanumeric touch keyboard but I need only numeric keyboard which opened by input type=“number”. So idea is to hide numeric input control but to force its focus and I will have numeric keypad for pin code. Any other idea welcome.
Any way I’d like to solve problem with applying validation class, it is curious itself. Thank you.

How about PinDialog?

Thank you for the clue. I tried it but its not as good as I expected. First of all - it is modal window, it breaks UI flow. Its look is, hmm … why input control begins from the leftmost side without any padding? But may be I just can’t cook it right. Also I need another window with two pin code password inputs (for pin setup) so it does not fully solves my problem. Any way, thank you for advice.