bug: Maskito ion-input does not work with ReactiveForms

[MW8086]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

I extended the example from the documentation at https://ionicframework.com/docs/api/input#input-masking to ReactiveForms.
When executing FormControl setValue, the content in ion-input is not masked. But it works with a normal HTML input field.

Expected Behavior

The ion-input should be masked in the same way as the standard HTML input field

Steps to Reproduce

`
Open https://stackblitz.com/edit/fpgq7vus-drpj2dkz and click the button

Code Reproduction URL

https://stackblitz.com/edit/fpgq7vus-drpj2dkz

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\MWeier\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.5.4
@angular-devkit/build-angular : 19.2.7
@angular-devkit/schematics : 19.2.7
@angular/cli : 19.2.7
@ionic/angular-toolkit : 12.2.0

Capacitor:

Capacitor CLI : 7.2.0
@capacitor/android : not installed
@capacitor/core : 7.2.0
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v20.16.0 (C:\Program Files\nodejs\node.exe)
npm : 10.8.1
OS : Windows 10

Additional Information

No response

[nsbarsukov]

Maskito listens beforeinput and input events. Programmatic (by developer) changes of input's value don't trigger these events (and Maskito team is not going to monkey-patch value's setter of <input /> to detect the such programmatic update – it is obviously overkill).

Maskito is based on the assumption that developer is capable to programmatically patch input with valid value.
If you need to programmatically patch input's value but you are not sure that your value is valid (for example, you get it from the server), you should use maskitoTransform utility:

import {maskitoTransform} from '@maskito/core';
 
const maskitoOptions: MaskitoOptions = {
    mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
};
 
const definitelyValidValue = maskitoTransform('5555551212', maskitoOptions);
 
console.info(definitelyValidValue); // '+1 (555) 555-1212'
 
this.formControl.patchValue(definitelyValidValue);

Learn more: https://maskito.dev/core-concepts/transformer

---

The only exception is built-in Angular DefaultValueAccessor (is is applied to basic HTML <input />'s field). It is the only case when patching of its writeValue is robust solution. Patching all custom control value accessor with the same logic is not a good idea because it can break its internal logic.
That's why automatic formatting for control.patchValue works for basic <input /> (DefaultValueAccessor) and does not work for ion-input (custom control value accessor).