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 value on this format: ${dialCode}${nationalNumber}
• allowed is 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