phone-number.component.html

<div class="profile-info">
  <ion-row>
    <ion-label>First Name:</ion-label>
    <ion-input [(ngModel)]="profile.firstName"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>Last Name:</ion-label>
    <ion-input [(ngModel)]="profile.lastName"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>Organization:</ion-label>
    <ion-input [(ngModel)]="profile.org"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>Job Title:</ion-label>
    <ion-input [(ngModel)]="profile.orgTitle"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>Address Line 1:</ion-label>
    <ion-input [(ngModel)]="profile.addressLine1"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>Address Line 2:</ion-label>
    <ion-input [(ngModel)]="profile.addressLine2"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>City:</ion-label>
    <ion-input [(ngModel)]="profile.city"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>Zip Code:</ion-label>
    <ion-input [(ngModel)]="profile.zipCode"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>State/Province:</ion-label>
    <ion-input [(ngModel)]="profile.stateProvince"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>Country:</ion-label>
    <ion-input [(ngModel)]="profile.country"></ion-input>
  </ion-row>
  <ion-row>
    <ion-label>Phone Number:</ion-label>
    <ion-input type="tel" [(ngModel)]="profile.tel" (ionInput)="parsePhoneNumber()">
      <div slot="label">
        <ion-select [(ngModel)]="countryCode" interface="popover"
        [interfaceOptions]="{cssClass: 'country-codes'}">
          <ion-select-option *ngFor="let phoneNumber of phoneNumbers" [value]="phoneNumber.country">
            {{phoneNumber.text}}
          </ion-select-option>
        </ion-select>
      </div>
    </ion-input>
  </ion-row>
</div>