<div layoutDirection="row" appLayoutGap="15px">
  <mat-form-field [appFlex]="countrySelectorFlex" subscriptSizing="dynamic">
    <mat-select [(ngModel)]="countryCode" (ngModelChange)="changePhoneCountry()">
      <mat-option *ngFor="let countryCode of sortedCountries" [value]="countryCode[1]">
        <span class="fi {{getFlagClass(countryCode[1])}}"></span>  {{countryCode[1]}}
      </mat-option>
    </mat-select>
    <mat-hint i18n>Phone country</mat-hint>
    <mat-icon *ngIf="countryCode" class="fi {{getFlagClass(countryCode)}} country-flag-prefix" matPrefix></mat-icon>
  </mat-form-field>
  <mat-form-field [appFlex]="phoneInputFlex" subscriptSizing="dynamic">
    <mat-label i18n>Phone number</mat-label>
    <input name="phone"
           matInput
           id="phoneNr"
           type="text"
           [formControl]="control">
    <mat-error>{{control.errors | errorFormatter}}</mat-error>
    <mat-hint i18n>International format (e.g. +2547xxxxxxxx)</mat-hint>
  </mat-form-field>
</div>
