AngularTelephoneInput

An Angular Material package for telephone input with different dial codes.

Supports:

• Angular
• Angular Material
• Angular Ng-Bootstrap ("ng-bootstrap": "^14.1.0")

Images

Installation

Install This Library

$ npm install ngx-telephone-input --save $ npm install ng-bootstrap --save

Usage

Import

import { NgxTelephoneInputModule } from 'ngx-telephone-input'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Add NgxTelephoneInputModule to your module file: Add NgbModule to your module file:

imports: [
     NgxTelephoneInputModule,
    NgbModule
  ]

Example

Refer to test app in this repository for working example.

<form [formGroup]="phoneNumberForm" (ngSubmit)="setValue()">
    <ngx-telephone-input formControlName="phone" [customClass]="(submitted && f.phone.invalid ) == true ? 'is-invalid': ''"></ngx-telephone-input>
    <div *ngIf="submitted && f.phone.errors" >
        <div *ngIf="f.phone.errors.required">*Required</div>
        
    </div>
    <input type="submit" value="Save">
</form>

export class AppComponent {
  title = 'testApp';
  phoneNumberForm!:FormGroup;
  submitted:boolean = false;
 ngOnInit(){
  this.phoneNumberForm = new FormGroup({
    phone: new FormControl('',[Validators.required,Validators.pattern('[- +()0-9]{11,13}')])
  });
 }

 get f (){return this.phoneNumberForm.controls}
 setValue(){
 
  this.submitted = true;
 if(this.phoneNumberForm.invalid){
   alert("Invalid number")
 }
 else{
  
  console.log(this.phoneNumberForm.value)
  this.phoneNumberForm.reset()
  this.submitted = false;
 }
 }
}

Options

| Options | Type | Default | Description | | ------------------------------|------------------------|--------------------|-------------------------------------------------------------------------------------| | [customClass] | Class | '' | add custom class names for styling. | | .phoneClass | default class | styles | add styles |

default syle

.phoneClass{
    border-style: solid;
    border-color: #0582f8;
    box-shadow: 1px 2px 7px #77b7f3;
    border-radius: 5px;
    outline: none;
}
.is-invalid{
    border-color: red;
    color: red;
    box-shadow: 1px 2px 7px rgb(247, 95, 95);
}

Library Contributions

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

keywords

angular npm telephone inputtag dialcodes