<ng-container *ngIf="error == false">
  <form [formGroup]="formGrp">
    <div class="row">
      <div class="col-2 col-2-mw">
        <sts-form-options [formDir]="formDir" class="dropdown-sm" [populationData]="countryCodes"
          [model]="selectedCountryCode" [formGrp]="formGrp" [name]="numCountryCode"
          (methodToExecute)="onMobileChange($event, 'selectedCountryCode')"
          [hideError]="true">
        </sts-form-options>
      </div>
      <div class="col-1 col-1-mw">
        <span class="separators">-</span>
      </div>

      <div class="col-2 col-2-mw">
        <sts-form-options [formDir]="formDir" class="dropdown-sm" [populationData]="areaCodes"
          [model]="selectedAreaCode" [formGrp]="formGrp" [name]="numAreaCode"
          (methodToExecute)="onMobileChange($event, 'selectedAreaCode')"
          [hideError]="true"></sts-form-options>
      </div>
      <div class="col-1 col-1-mw">
        <span class="separators">-</span>
      </div>
      <div class="col-2 col-2-mw">
        <sts-form-input [formDir]="formDir" class="input-sm" [name]="numName1" [placeHolder]="mobilePlaceholder"
          [model]="num1" [formGrp]="formGrp" (methodToExecute)="onMobileChange($event, 'num1')"
          [hideError]="true"></sts-form-input>
      </div>
      <div class="col-1 col-1-mw">
        <span class="separators">-</span>
      </div>
      <div class="col-2 col-2-mw">
        <sts-form-input [formDir]="formDir" class="input-sm" [name]="numName2" [placeHolder]="mobilePlaceholder"
          [model]="num2" [formGrp]="formGrp" (methodToExecute)="onMobileChange($event, 'num2')"
          [hideError]="true">
        </sts-form-input>
      </div>
    </div>
    <ng-container *ngIf="control1 && control2 && control3 && control4">
      <div class="row row-error">
        <div class="col-12">
          <div class="error-holder scrollbar-morpheus-den square horizontal-thin">
            <div class="align-position text-no-select "
              *ngIf="((control1?.hasError('required') && formDir?.submitted) || (control1?.invalid && (control1?.dirty || control1?.touched)))
              || ((control2?.hasError('required') && formDir?.submitted) || (control2?.invalid && (control2?.dirty || control2?.touched)))
              || ((control3?.hasError('required') && formDir?.submitted) || (control3?.invalid && (control3?.dirty || control3?.touched)))
              || ((control4?.hasError('required') && formDir?.submitted) || (control4?.invalid && (control4?.dirty || control4?.touched)))">
              {{'Please key in a valid phone number' }}</div>
          </div>
        </div>
      </div>
    </ng-container>

  </form>

</ng-container>

<ng-container *ngIf="error">
  <div class="custom-error">{{ genericErrorMessage }}</div>
</ng-container>
