A field for entering a phone number with a mask and country code?

Question

Yii

Hello!
There is a field in the database for storing phones in the format
79998889998899 for a phone in Russia [phone]
819998889998899 for a phone in Japan [phone]
8529998889998899 for a phone in Hong Kong [phone]
999 in which the country code is selected from select, and a text field for the phone by mask.
With a mask, it’s more or less clear, but I can’t figure out how to bind select here in such a way that it looks like a single field and that validation takes place.

<?= $form->field($model, 'phone')
                    ->textInput(['placeholder'=>'[phone]'])
                    ->widget(\yii\widgets\MaskedInput::className(), [
                        'mask' => '[phone]',
                        'clientOptions' => [
                            'removeMaskOnSubmit' => true,
                        ],
                    ]) ?>

Answer 1

https://github.com/jackocnr/intl-tel-input
andr-04.github.io/inputmask-multi/ru.html
https://intl-tel-input.com/

Answer 2

Write your widget
Validator pattern /^((\+\d{1,3})[\- ]?)?(\(?\d{2,3}\)?[\- ]?)?[\ d\- ]{9,10}$/
Each country has its own input mask, respectively, for this we use the MaskedInput widget.
Render template to field using boostrap input-group (input-group-btn + dropdown-menu).
When selecting and initializing the widget, we change the input mask to the one selected from the dropdown-menu. Similar to the flag icon in input-group-btn.