Gathering detailed insights and metrics for @lbgm/phone-input
Installations
npm install @lbgm/phone-inputDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=14.18.3
Node Version
14.18.3
NPM Version
6.14.15
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
4
TypeScript
SCSS
HTML
JavaScript
TypeScript (56.33%)
SCSS (25.62%)
HTML (11.39%)
JavaScript (6.67%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
lbgm
Download Statistics
Total Downloads
936
Last Day
2
Last Week
3
Last Month
29
Last Year
231
GitHub Statistics
11 Stars
33 Commits
2 Watching
1 Branches
1 Contributors
Bundle Size
148.73 kB
Minified
39.10 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.2-alpha
Package Id
@lbgm/phone-input@1.0.2-alpha
Unpacked Size
431.00 kB
Size
106.13 kB
File Count
21
NPM Version
6.14.15
Node Version
14.18.3
Publised On
16 Apr 2023
Total Downloads
Cumulative downloads
Total Downloads
936
Last day
100%
2
Compared to previous day
Last week
-57.1%
3
Compared to previous week
Last month
480%
29
Compared to previous month
Last year
-61.6%
231
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
2
Versions
PhoneInput
An Angular phone input component module. This library was generated with Angular CLI version 12.2.0.
Install
1npm i @lbgm/phone-input
Props & Types
1export type T_FormFieldControl = { [key: string]: AbstractControl; }; 2 3export interface PhoneDATA { 4 country?: string; 5 dialCode?: string | number; 6 nationalNumber?: string | number; 7 number?: string | number; 8 isValid?: boolean; 9} 10 11@Input() value?: string = ""; // like '22997000000' 12@Input() label?: string = ""; 13@Input() hasError?: boolean = false; 14@Input() hasSuccess?: boolean = false; 15@Input() placeholder?: string = "" 16@Input() name?: string = "lbgm-phone-input" 17@Input() required?: boolean = false; 18@Input() defaultCountry?: string = 'BJ'; 19@Input() arrow?: boolean = true; // to show or hide arrow 20@Input() listHeight?: number = 150; 21@Input() allowed?: string[] = ([]); 22 23@Input() group?: FormGroup; 24@Input() controls?: T_FormFieldControl;
- pass
valueon this format:${dialCode}${nationalNumber} allowedis an array of country iso2 (string).
Slots
1<!-- add an element with attribute `arrow` to replace arrow icon. --> 2<!-- ng-content code: --> 3<ng-content select="[arrow]"></ng-content> 4 5 6<!-- any slot --> 7<!-- append content to component --> 8<!-- add an element or a container with attribute `slot`--> 9<!-- ng-content code: --> 10<ng-content select="[slot]"></ng-content>
Use
1// app.module.ts 2 3import { NgModule } from '@angular/core'; 4import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 5import { BrowserModule } from '@angular/platform-browser'; 6import { PhoneInputModule } from '@lbgm/phone-input'; // here 7 8import { AppComponent } from './app.component'; 9 10@NgModule({ 11 declarations: [ 12 AppComponent, 13 ], 14 imports: [ 15 BrowserModule, 16 FormsModule, 17 ReactiveFormsModule, 18 PhoneInputModule // here 19 ], 20 providers: [ 21 { 22 provide: Window, 23 useValue: window 24 } 25 ], 26 bootstrap: [AppComponent] 27}) 28export class AppModule { }
1<!-- with FormBuilder, the component handle error automatically --> 2<lbgm-phone-input 3 [label]="'N° de téléphone'" 4 [required]="true" 5 [name]="'phone'" 6 [group]="form" 7 [controls]="form.controls" 8 (phoneEvent)="input=$event" 9 (phoneData)="inputData=$event" 10 (country)="inputCountry=$event" 11> 12</lbgm-phone-input> 13 14 15<!-- without FormBuilder --> 16<lbgm-phone-input 17 [label]="'N° de téléphone'" 18 [required]="true" 19 [name]="'phone'" 20 (phoneEvent)="input=$event" 21 (phoneData)="inputData=$event" 22 (country)="inputCountry=$event" 23> 24</lbgm-phone-input>
- phoneEvent is string
- country is string
- phoneData is type PhoneDATA
Use with FormBuilder example
1import { Component } from '@angular/core'; 2import { FormBuilder, Validators, FormGroup } from '@angular/forms'; 3import { PhoneDATA } from '@lbgm/phone-input'; 4 5@Component({ 6 selector: 'app-root', 7 templateUrl: './app.component.html', 8 styleUrls: ['./app.component.scss'] 9}) 10export class AppComponent { 11 title = 'phone-input'; 12 form: FormGroup; 13 input?: string = ""; 14 inputData?: PhoneDATA; 15 inputCountry: string = ""; 16 17 18 constructor(private fb: FormBuilder) { 19 this.form = fb.group({ 20 'phone': [ 21 '', 22 [ 23 Validators.required, 24 Validators.minLength(8) 25 ] 26 ] 27 }) 28 } 29 30 onSubmit(): void { 31 this.form.markAllAsTouched(); 32 } 33}
Error on field
No vulnerabilities found.
No security vulnerabilities found.