<mat-form-field *ngIf="editMode" [appearance]="fieldAppearance"  style="width: 100%">
  <mat-label>
    <span [translate]="'inputs.phone.label'"></span>
  </mat-label>
  <input matInput type="text" [formControl]="formControlComponent"
         [placeholder]="'inputs.phone.placeholder' | translate" [errorStateMatcher]="matcher"/>
  <mat-icon  color="accent" matSuffix>phone</mat-icon>

  <mat-error *ngIf="formControlComponent.hasError('pattern')">
    <span [innerHTML]="'inputs.phone.error.pattern' | translate"></span>
  </mat-error>

</mat-form-field>

<div *ngIf="!editMode">
  <div>{{formControlComponent.value}}</div>
</div>

