Поле для ввода телефона с указанием маски и кода страны?

Question

[Алексей]

Всем привет!
Есть поле в БД для хранения телефонов в формате
79998889998899 для телефона России [phone]
819998889998899 для телефона Японии [phone]
8529998889998899 для телефона Гонконга [phone] 99
Хотелось бы сделать во вьюхе единое поле в котором код страны выбирается из select, и текстового поля для телефона по маске.
С маской более-менее понятно, но не соображу как сюда привязать select таким образом, выглядело как единое поле и чтобы валидация проходила.

<?= $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/

Comments

[Алексей]

я их смотрел, перед тем как задать вопрос, но вопрос именно был в том, во вьюхе это оформить, чтобы поле считалось единым, но состояло из select+input. И валидация срабатывала на их комбинацию.

[Максим Тимофеев]

Алексей, Пишите свой виджет, свой валидатор.

Answer 2

[Владимир Солдатов]

Написать свой widget
Паттерн проверки валидатором /^((\+\d{1,3})[\- ]?)?(\(?\d{2,3}\)?[\- ]?)?[\d\- ]{9,10}$/
Для каждой страны маска ввода своя соответственно для это используем виджет MaskedInput.
Рендерим template в field с использованием boostrap input-group (input-group-btn + dropdown-menu).
При выборе и инициализации виджета меняем маску input на выбранную из dropdown-menu. Аналогично иконку флага в input-group-btn.