Как можно отключить режим strictMode в плагине intl-tel-input?

Как можно отключить параметр strictMode плагина <a href="https://intl-tel-input.com/examples/separate-dial-code.html" rel="nofollow">intl-tel-input</a> при выборе страны "Таиланд"? Я понимаю, как отследить выбор страны, но не могу отключить strictMode. Например, вот код инициализации плагина:

<pre><code class="javascript">const inputs = document.querySelectorAll(".phone-input");
    inputs.forEach(function (item, i, arr) {
        var iti = window.intlTelInput(item, {
            initialCountry: "ru",
            separateDialCode: true,
            strictMode: true,
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.1.0/build/js/utils.js",
        });
    });</code></pre>
  • 29 ноября 2024 г. 11:53
Ответы на вопрос 2
Чтобы отключить режим `strictMode` в плагине `intl-tel-input` при выборе определенной страны, в данном случае Таиланда, вы можете использовать событие `countrychange`, которое позволяет отслеживать изменения выбранной страны и соответственно менять настройки.

Вот пример того, как можно реализовать это:

```javascript
const inputs = document.querySelectorAll(".phone-input");

inputs.forEach(function (item, i, arr) {
    var iti = window.intlTelInput(item, {
        initialCountry: "ru",
        separateDialCode: true,
        strictMode: true, // исходное значение
        utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.1.0/build/js/utils.js",
    });

    // Отслеживаем изменение страны
    item.addEventListener("countrychange", function() {
        const countryData = iti.getSelectedCountryData();
        
        // Проверяем, выбрана ли страна "Таиланд"
        if (countryData.iso2 === "th") {
            iti.setOptions({ strictMode: false }); // отключаем strictMode для Таиланда
        } else {
            iti.setOptions({ strictMode: true }); // устанавливаем strictMode обратно
        }
    });
});
```

### Объяснение кода:
1. Мы инициализируем плагин `intl-tel-input` с параметрами.
2. Добавляем обработчик события `countrychange`, который срабатывает каждый раз, когда пользователь выбирает новую страну.
3. Внутри обработчика мы получаем текущие данные о выбранной стране с помощью метода `getSelectedCountryData()`.
4. Проверяем, соответствует ли `iso2` значения "th" (код страны для Таиланда).
5. Если страна — Таиланд, отключаем режим `strictMode`, в противном случае возвращаем его обратно.

Таким образом, вы сможете динамически включать и отключать режим `strictMode` в зависимости от выбранной страны.
Для отключения strictMode в плагине intl-tel-input при выборе определенной страны, можешь использовать метод setOptions после инициализации. 
Тем не менее, можно реализовать сброс и повторную инициализацию плагина с обновленным значением strictMode

if (selectedCountry === "th") {
            iti.destroy(); // Уничтожаем текущий экземпляр
            iti = window.intlTelInput(item, {
                initialCountry: "th",
                separateDialCode: true,
                strictMode: false,
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.1.0/build/js/utils.js",
            });
        }


Такой подход является рабочим, но не самым оптимальным (ресурсоемкое)

как вариаент:
- фильтрация пользовательского ввода без пересоздания
Если strictMode отвечает за валидацию ввода, можно отключить его влияние, добавив свою собственную логику валидации, независимо от состояния strictMode.

const isValidNumber = iti.isValidNumber();
if (!isValidNumber && selectedCountry !== "th") {
    // Показываем ошибку для других стран, но не для Таиланда
}


Если количество полей небольшое, пересоздание экземпляра (destroy и пересоздание) подходит как простое и понятное решение, в иных решениях нет
Похожие вопросы