Nondeterministic Postrequisite Metaprotocol

    ngx-mat-tel-input
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    NgxMatTelInput

    Angular Material component for inputting telephone numbers.

    • Validates and formats phone numbers (via Google's libphonenumber)
    • Material design
    • Reactive forms
    • 250 countries and dependent areas
    • Flags optimized for low resolution
    • Angular 8, 9, 10, 11, 12

    Click here to see a StackBlitz demo.

    Installation

    Install peer dependencies:

    $ npm install @angular/flex-layout ngx-mat-select-search google-libphonenumber world-countries
    

    Install the package using npm:

    $ npm install ngx-mat-tel-input
    

    Note: If you're running npm 7.0.0 or later, add --legacy-peer-deps

    Import the module into your app.module.ts:

    import { NgxMatTelInputModule } from 'ngx-mat-tel-input';
    
    @NgModule({
      ...
      imports: [
        ...,
        NgxMatTelInputModule
      ],
      ...
    })
    

    Basic Usage

    Template

    <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()" autocomplete="off">
      <mat-form-field appearance="outline">
        <mat-label>Phone Number</mat-label>
        <lib-ngx-mat-tel-input formControlName="phoneNumber">
        </lib-ngx-mat-tel-input>
        <mat-error *ngIf="phoneNumber.hasError('required')">
          This field is <strong>required</strong>
        </mat-error>
        <mat-error *ngIf="phoneNumber.hasError('format')">
          Phone number is <strong>invalid</strong>
        </mat-error>
      </mat-form-field>
    </form>
    

    Component

    import {Component} from '@angular/core';
    
    import {FormGroup, FormControl, Validators} from '@angular/forms';
    
    @Component({
      selector: 'my-component',
      templateUrl: './my-component.component.html',
      styleUrls: ['./my-component.component.css']
    })
    export class MyComponent { 
      myFormGroup = new FormGroup({
        phoneNumber: new FormControl({value: '', disabled: false}, [Validators.required,]),
      });
    
      onSubmit(): void {
    
      }
    
      get phoneNumber(): FormControl {
        return this.myFormGroup.get('phoneNumber') as FormControl;
      }
    
    }
    

    Errors

    format

    This error is triggered when the user's input does not form a valid phone number.

      <mat-error *ngIf="phoneNumber.hasError('format')">
        Phone number is <strong>invalid</strong>
      </mat-error>
    

    country

    This error is triggered when the user enters a phone number which belongs to a country or dependent area that isn't in countryWhiteList, or is in countryBlacklist.

      <mat-error *ngIf="phoneNumber.hasError('country')">
        US numbers <strong>only</strong>
      </mat-error>
    

    Options

    Option Type Optional? Example Description
    defaultCountry string Yes [defaultCountry]="'US'" The country or dependent area to be selected by default in the country picker. If omitted, Afghanistan will be selected by default.
    countryWhitelist string[] Yes [countryWhitelist]="['US', 'CA']" List of countries and dependent areas to include in the country picker. If omitted, all countries and dependant areas will be displayed.
    countryBlacklist string[] Yes [countryBlacklist]="['DE','PA','NZ']" List of countries and dependent areas to exclude from the country picker. If omitted, all countries and dependant areas will be displayed.
    format number Yes [format]="0" The format of the phone number written to form control bound to lib-ngx-mat-tel-input.
    • 0 - E164 (Default)
    • 1 - INTERNATIONAL
    • 2 - NATIONAL
    • 3 - RFC3966

    NOTE

    Countries are represented by their ISO 3166-1 alpha-2 code (e.g. " FR" for France). Codes should consist of capital letters only with no extraneous whitespace.


    Install

    npm i ngx-mat-tel-input

    DownloadsWeekly Downloads

    116

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    1.13 MB

    Total Files

    18

    Last publish

    Collaborators

    • ebenh