Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-mat-input-tel

Package Overview
Dependencies
Maintainers
0
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-mat-input-tel

An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.

  • 18.4.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

International Telephone Input for Angular Material (ngxMatInputTel)

An Angular Material package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.

npm version NPM npm bundle size npm

Demo

Caution

This is a fork from the ngx-mat-intl-tel-input library whish does not seems to be maintained anymore. Last commit is over a year

Supports:

  • Angular >=15
  • Angular Material >=15
  • ReactiveFormsModule
  • FormsModule
  • Validation with libphonenumber-js

Installation

Install This Library

$ npm i ngx-mat-input-tel@latest

Install Dependencies Optional

$ npm i libphonenumber-js@latest

Usage

Import

Add NgxMatInputTelComponent to your component file:

imports: [NgxMatInputTelComponent];

Example

Refer to main app in this repository for working example.

<form #f="ngForm" [formGroup]="phoneForm">
  <ngx-mat-input-tel
    [preferredCountries]="['us', 'gb']"
    [enablePlaceholder]="true"
    [enableSearch]="true"
    name="phone"
    describedBy="phoneInput"
    formControlName="phone"
  ></ngx-mat-input-tel>
</form>

<form #f="ngForm" [formGroup]="phoneForm">
  <ngx-mat-input-tel
  [preferredCountries]="['us', 'gb']"
  [enablePlaceholder]="true"
  [enableSearch]="true"
  name="phone"
  autocomplete="tel"
  (countryChanged)="yourComponentMethodToTreatyCountryChangedEvent($event)" // $event is a instance of current select Country
  formControlName="phone"></ngx-mat-input-tel>
</form>

If you want to show the sample number for the country selected or errors , use mat-hint anf mat-error as

<form #f="ngForm" [formGroup]="phoneForm">
  <ngx-mat-input-tel
    [preferredCountries]="['us', 'gb']"
    [onlyCountries]="['us', 'gb', 'es']"
    [enablePlaceholder]="true"
    name="phone"
    autocomplete="tel"
    formControlName="phone"
    #phone
  ></ngx-mat-input-tel>
  <mat-hint>e.g. {{phone.selectedCountry.placeHolder}}</mat-hint>
  <mat-error *ngIf="f.form.controls['phone']?.errors?.required"
    >Required Field</mat-error
  >
  <mat-error *ngIf="f.form.controls['phone']?.errors?.validatePhoneNumber"
    >Invalid Number</mat-error
  >
</form>

Inputs

OptionsTypeDefaultDescription
enablePlaceholderbooleanfalseInput placeholder text, which adapts to the country selected.
enableSearchbooleanfalseWhether to display a search bar to help filter down the list of countries
formatstringdefaultFormat of "as you type" input. Possible values: national, international, default
placeholderstringundefinedPlaceholder for the input component.
maxLengthnumber15max length of the input.
onlyCountriesstring[][]List of manually selected country abbreviations, which will appear in the dropdown.
preferredCountriesstring[][]List of country abbreviations, which will appear at the top.
resetOnChangebooleanfalseReset input on country change
searchPlaceholderstringSearch ...Placeholder for the search input

Outputs

OptionsTypeDefaultDescription
countryChangedEventEmitter<Country>undefinedOn country change

Css variable

NameDefaultExplanation
--ngxMatInputTel-opacity0If you wish the country flag to be shown by default
--ngxMatInputTel-flag-displayinline-blockIf you wish to hide the country flag

Library Contributions

  • Fork repo.
  • Go to ./projects/ngx-mat-input-tel
  • Update ./src/lib with new functionality.
  • Update README.md
  • Pull request.

Helpful commands

  • Build lib: $ npm run build_lib
  • Copy license and readme files: $ npm run copy-files
  • Create package: $ npm run npm_pack
  • Build lib and create package: $ npm run package

Use locally

After building and creating package, you can use it locally too.

In your project run:

$ npm install --save {{path to your local '*.tgz' package file}}

Authors and acknowledgment

BuyMeACoffee

Keywords

FAQs

Package last updated on 10 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc