How to append the telephone number to the country code in angular 5 with primeng

Question

Currently I'm working on a project using Angular 5 with primeng. I'm trying to append the country which coming from a dropdown to the phone number in a reactive form. I'm having a problem when I select a country code from a dropdown It doesn't append to the telephone number which I do have to pass the value.

import { Component } from '@angular/core';

import { FormGroup, FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  profileForm = new FormGroup({
    phoneNumber: new FormControl('')
  })

  onSubmit(phoneValue){
    console.log(phoneValue)
  }

  onCountryChange(event){
    console.log(event);
  }

}

<form [formGroup]="profileForm" (ngSubmit)="onSubmit(profileForm.value)">
<div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-4 responsiveForIpad">
      <div class="ui-g passengerMainDetails">
             <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-12">
                   <label> Contact Number *</label>
              </div>
       <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-12">
          <input type="text" formControlName="phoneNumber" ng2TelInput  (countryChange)="onCountryChange($event)" placeholder="Please Enter the Phone number here"/>
        </div>
    </div>
 </div>
 </form>

Answer 1

First, you need to have a valid Form Control that is passed to the ng2TelInput while you have phoneName in you TS and MobileNo in your HTML.

After that, the value will be binded to the from control and can be accessed when submitting using this.profileForm.get('phoneNumber').value. This will return an object which you can get the number using the internationalNumber if you want the formatting with the + and spaces, or using the number / nationalNumber if you need it without the formatting.

For that, you won't really need the onCountryChange emitter as we will get the number when submitting (Except if you need the listener for something else).

import { Component } from '@angular/core';

import { FormGroup, FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  profileForm = new FormGroup({
    phoneNumber: new FormControl('')
  });

  onSubmit(){
    console.log(this.phoneForm.get('phone').value.internationalNumber);
  }
}

---

 <form [formGroup]="profileForm" (ngSubmit)="onSubmit(profileForm.value)">
    <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-4 responsiveForIpad">
          <div class="ui-g passengerMainDetails">
                 <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-12">
                       <label> Contact Number *</label>
                  </div>
           <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-12">
              <input type="text" formControlName="phoneNumber" ng2TelInput placeholder="Please Enter the Phone number here"/>
            </div>
        </div>
     </div>
     </form>