Custom Countries Dial Phone Codes

An angular component that has an country dial code selection and mask phone number input.

Installation

Use npm to install the package

$ npm i ng-countries-phone --save 

Import

You must add into your module imports the CountryPhoneModule in order to use component.

import { CountryPhoneModule } from 'ng-countries-phone';

@NgModule({
 // ...
 imports: [
   // ...
   CountryPhoneModule
 ]
})

You must add this configuration into your project's angular.json following this path angularjson.projects.your-project-name.architect.build.options. Then,you can import package's assets into your project assets. Because in the package assets there is a country json file.

 "assets": [
            "src/favicon.ico",
            "src/assets",
            {
              "glob": "**/*",
              "input": "./node_modules/ng-countries-phone/assets",
              "output": "./assets/"
            }

How to use

You can use component like below.

• Your parent form.

testForm: FormGroup;

ngOnInit(): void {
   this.createForm();
}

createForm() {
  this.testForm = this.fb.group({
    code: ['',Validators.required],
    phone: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(40)]],
  });
}

get codeControl() { return this.testForm.get('code'); }
get phoneControl() { return this.testForm.get('phone'); }

onSubmit(){
  const formData=this.testForm.getRawValue();
  //.. Do some busines..
}

• Using app-phone in parent form.

<form [formGroup]="testForm" (submit)="onSubmit()">
    <!-- you can use inside your form. But you have to bind your testForm with parentForm attribute-->
    <app-phone
     [parentForm]="testForm" 
     [codeFormControlName]="'code'" 
     [phoneFormControlName]="'phone'"
     [codeControl]="codeControl"
     [phoneControl]="phoneControl"
     [defaultSelectedCountry]="'+90'">
     </app-phone>
</form>

Attributes

You can customize component with your own css classes and you can give some configration. There are some details in the below tables.

| Attribute | Description | | :--- | :----: | | codeClass | class of country selection. It has boostrap ".form-select" class default. But, you can set your own class.| | phoneClass | class of phone input. It has boostrap ".form-control" class default. But, you can set your own class.| | formGroupClass | class of parent div of country selection and phone input. It has boostrap ".form-group" class default. But, you can set your own class.| | codeControl | FormControl of parentForm for country selection.| | phoneControl | FormControl of parentForm for phone input.| | parentForm | Parent form.| | phoneLabelText | Phone input label. It has default "Phone Number" value.| | codeLabelText | Country selection label. It has default "Country Code" value.| | codeFormControlName | FormControlName of parent form for country selection code.| | phoneFormControlName | FormControlName of parent form for phone input.| | codeValidationMessage | Custom validation message for country selection.| | defaultSelectedCountry | Default selected country code is "+90" Turkey. You can set your own.| | phoneValidationMessage | Custom validation message for phone input.|

Contributing And Issues

• Before adding any new feature or a fix make sure to open an issue first!
• Make sure you have angular-cli installed globally.

$ npm install -g angular-cli

• Clone the project, and install dependencies.

$ git clone https://github.com/ismailkasan/countries-phone.git
$ npm install

• Create a new branch

$ git checkout -b feat/someFeature

• Make sure everything is running properly
• Commit & push, and make a pull request!