<mat-form-field *ngIf="editMode" class="email-input"  [appearance]="fieldAppearance">

  <mat-label><span [translate]="'inputs.email.label'"></span></mat-label>

  <input type="email" matInput [formControl]="formControlComponent" [errorStateMatcher]="matcher"
         [placeholder]="'inputs.email.placeholder' | translate">

  <mat-error
    *ngIf="formControlComponent.hasError('email') && !formControlComponent.hasError('required')">
    <span [translate]="'inputs.email.error.invalid'"></span>
  </mat-error>

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

</mat-form-field>

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