Как создать IONIC-компонент для intl-tel-ввода в IONIC 3

Question

Как создать компонент IONIC 3 для https://github.com/jackocnr/intl-tel-input?или есть другой модуль в ionic 3, для которого я был бы признателен за любую помощь.

Answer 1

Если вы получаете сообщение об ошибке «Не удается связать с« ng2TelInputOptions », так как это не известное свойство« input »».В частности, для Ionic.

Существует два способа решения этой проблемы:

1. Если вы ленивая загрузка компонента / страницы путем импортамодуль, а не компонент:

   • Добавить Ng2TelInputModule к импорту в модуле этого компонента / страницы

2. Если вы импортируете компонент/ страница непосредственно в модуле ( загрузка без отложений )

   • Добавить Ng2TelInputModule к импорту в модуль, содержащий импортированную страницу / компонент
   • Добавить Ng2TelInputModule для импорта модуля страницы / компонента

Например, если вы импортируете компонент / страницу в app.module.ts в декларациях, вам необходимо выполнить шаг2.

Answer 2

Я бы посоветовал вам использовать альтернативу ng2-tel-input , потому что библиотека, которую вы пытаетесь использовать, написана на Javascript, которая вам понадобится для написания обертки и которая делает что-тосложно реализовать.

Итак, вот решение использовать ng2-tel-input

Шаг 1: Установить библиотеку npm install ng2-tel-input --save

Шаг 2: Стиль импорта @import 'intl-tel-input/build/css/intlTelInput.css';

Шаг 3: Модуль импорта import {Ng2TelInputModule} from 'ng2-tel-input';

Директива шага 4 Add ng2TelInputна ваше текстовое поле

<input type="text"
  ng2TelInput
  [ng2TelInputOptions]="{initialCountry: 'in'}"
  (hasError)="hasError($event)"
  (ng2TelOutput)="getNumber($event)"
  (intlTelInputObject)="telInputObject($event)"
  (countryChange)="onCountryChange($event)" />

Шаг 5: получить Пользователь введите номер на ионной странице

telInputObject(obj) {
    console.log(obj);
    obj.intlTelInput('setCountry', 'in');
  }

Надеюсь, что эта помощь!