angularangular14libphonenumberngx-international-phone-number

ngx-mat-intl-tel-input not working in Angular 14


I have installed Angular Material and CDK for the Angular 14 version. I am using:

import { NgxMatIntlTelInputModule } from "ngx-mat-intl-tel-input";

When I import this library, it's getting an error:

"ngx-mat-intl-tel-input" has no exported member named 'NgxMatIntlTelInputModule'. Did you mean 'NgxMatIntlTelInputComponent?

How to use ngx-mat-intl-tel-input for use phone number validation with the country code in Angular 14 The demo url: https://stackblitz.com/edit/ngx-mat-intl-tel-inpu-demo

How to set the phone number blank or clear when we change the country code in this ngx-mat-intl-tel-input as per the below code:

<mat-form-field appearance="outline">
  <ngx-mat-intl-tel-input 
    [preferredCountries]="['in', 'us']"
    [enablePlaceholder]="true"
    [enableSearch]="true" 
    formControlName="phone"
    name="phone" #phone
  >
  </ngx-mat-intl-tel-input>                       
</mat-form-field>  
this.myForm = this.fb.group({
  name: 'User',
  phone: new FormControl('+93  234234243', [Validators.required])
});

Solution

  • I believe that you are installing ngx-mat-intl-tel-input with version 5.0.0 which is the latest version that supports Angular 14.

    It has been migrated to the standalone component. And the NgxMatIntlTelInputModule is no longer available.

    Thus, you need to import the NgxMatIntlTelInputComponent in your component assuming that your component is a standalone component.

    import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
    
    @Component({
      ...,
      standalone: true,
      imports: [NgxMatIntlTelInputComponent]
    })
    export class YourComponent { } 
    

    If your components are not standalone, you need to import the NgxMatIntlTelInputComponent in the declarations array in the root module of your Angular application.

    import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
    
    @NgModule({
      ...,
      declarations: [NgxMatIntlTelInputComponent]
    })
    export class AppModule { }