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

Ionic Framework ionic-v3
1

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) => {
  console.log(value);
  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?

2

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

3

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.

4

How about PinDialog?

5

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.