Angular 5 ngx-intl-tel-input 错误

Question

我正在尝试使用https://www.npmjs.com/package/ngx-intl-tel-input， 我有我的 module.ts：

import {NgxIntlTelInputModule} from "ngx-intl-tel-input";
import {BsDropdownModule} from "ngx-bootstrap";
@NgModule({
    imports: [
        NgxIntlTelInputModule,
        BsDropdownModule.forRoot()
    ],

和html代码：

<h1>
        {{phone_number}}
</h1>
<ngx-intl-tel-input [(value)]="phone_number"></ngx-intl-tel-input>

但我一直收到以下错误：

ERROR 错误：未捕获（承诺）：错误： StaticInjectorError(...)[BsDropdownDirective -> ComponentLoaderFactory]：StaticInjectorError（平台： 核心）[BsDropdownDirective -> ComponentLoaderFactory]： NullInjectorError：没有 ComponentLoaderFactory 的提供者！错误：StaticInjectorError(...)[BsDropdownDirective -> ComponentLoaderFactory]：StaticInjectorError（平台： 核心)[BsDropdownDirective -> ComponentLoaderFactory]:

Answer 1

我设法通过转到 index.js 文件来修复它

node_modules\ngx-intl-tel-input

在本节中

NgxIntlTelInputModule.decorators = [{
    type: NgModule,
    args: [{ imports: [ CommonModule, FormsModule, BsDropdownModule ], ...

我把 BsDropdownModule 改成了 BsDropdownModule.forRoot()

P.S 进行此更改后，不要忘记再次致电 ng serve。

这当然是一个补丁，仍然应该在这个包中修复，否则一旦包更新，更改将被覆盖。

Answer 2

您可以使用这个插件 - intl-input-phone。

npm i intl-input-phone

See the NPM link for more information npm

GitHub Link

Demo Link 1

Demo Link 2

Answer 3

希望对您有所帮助

在 App.module 中

import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
imports: [
   
    NgxIntlTelInputModule
]

在你的组件 html 中：

  <ngx-intl-tel-input [preferredCountries]="['es']" [enableAutoCountrySelect]="true" name="phoneNumber"
              formControlName="phoneNumber" [(ngModel)]="phoneNumber"></ngx-intl-tel-input>