MatPhoneCodeValidator

This library was generated with Angular CLI version 8.2.14. This package can be used to implement phone code and phone number validation. this library uses a widely used and valid google phone code library google-libphonenumber to validate the phone code and mobile number.

Install

Run this command in you angualr project npm i mat-phone-code-validator --save

Requirements

1. This component works on FormsModule form group and form controls. Please include them. To get its importance you can view this article. https://dev.to/vishesh/angular-reactive-forms-formsmodule-is-it-necessary-2aca

Usage

@import '~@angular/material/prebuilt-themes/indigo-pink.css'; - Add this line to the main styles.css / styles.scss file. This is required because it only has the complete styles for the package.

Import the module,

import { MatPhoneCodeValidatorModule } from 'mat-phone-code-validator';

Add it to the module imports in the module.ts file

imports: [ MatPhoneCodeValidatorModule ],

Full sample module.ts below,

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

/* Impot the module like this */
import { MatPhoneCodeValidatorModule } from 'mat-phone-code-validator';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatPhoneCodeValidatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create a form control in component.ts

  phone = new FormGroup({
    code: new FormControl('', [Validators.required]),
    number: new FormControl('', [(control) => {
          if (!control.value) {
              return {req: 'Please enter the mobile number'};
          }
        },
      Validators.maxLength(15),
      Validators.minLength(5)
    ])
  });

Finally use like below in the component.html

<lib-mat-phone-code-validator [group]="phone"
    [hasCustomValidators]="true"
    [contryCode]="phone.get('code')"
    [mobileNumber]="phone.get('number')"></lib-mat-phone-code-validator>

Exposed attributes and events

Input attributes

  // Main form group that contains the code and number
  @Input() group: FormGroup;
  
  // Country code form control - This will contain the country code
  @Input() contryCode: FormControl;
  
  // Phone number form control
  @Input() mobileNumber: FormControl;
  
  // Error message label name - Default is Mobile number
  @Input() errorlabel = 'Mobile number';
  
  // Flag to recognise if there are any custom validators provided
  @Input() hasCustomValidators = false;
  
  // Place holder string - Default is Mobile number
  @Input() placeholder = 'Mobile number';

  // Mobile enumber input box label - Default is Mobile number
  @Input() label = 'Mobile number';
  
  // ID sttribute of mobile number input tag - Default is contact_mobile_number
  @Input() id = 'contact_mobile_number';

Style class that you can use to add more styles or overwrite

1. .mobile-number - Main div wrapper
2. .mobile-code - Contains the mobile code select box
3. .mobile-input - Contains the mobile input field

Support

• Supports default form control validators like required, minlength, maxlength and forbiddenName. Will support more in future.

• It supports custom validator errors. To know how to add the custom validator functions check this article https://dev.to/vishesh/custom-error-handling-in-angular-reactive-forms-5f05.

You can declare the custom validation function while initialising form control like below.

// The number key has the sample custom validator implementation
const form = new FormGroup({
    code: new FormControl('', [Validators.required]),
    number: new FormControl('', [(control) => {
            if(!control.value){
                return {req: 'Please enter the mobile number'};
            }
        }
    ])
});

Future TODO

• Make it work without material
• Add flags
• Add auto mobile number formating based on code selection
• Add tests