<ng-container *ngIf="data?.length">
  <form [formGroup]="formGrp">
    <label *ngFor="let radio of data" class="form-radio" [ngClass]="{
        'form-radio-checked': model == radio,
        'form-radio-unchecked': model != radio
      }">
      <i [ngClass]="{
          fa: true,
          'fa-dot-circle': model == radio,
          'fa-circle': model != radio
        }"></i>

      <input type="radio" class="form-radio-hidden" mdbInput value="{{ radio }}" [formControlName]="name" />
      <span>{{ radio }}</span>
    </label>
    <ng-container *ngIf="control">
      <div class="align-position"
        *ngIf="(control?.hasError('required') && formDir?.submitted) || (control?.invalid && (control?.dirty || control?.touched))">
        {{ 'Please enter a valid '+ name }}</div>
      <!--uncomment this section if valid message is to be shown-->
      <!-- <mdb-success class="align-position" *ngIf="control.valid && (control.dirty || control.touched)">{{
        name + ' is Valid.'
      }}</mdb-success> -->
    </ng-container>
  </form>
</ng-container>
<ng-container *ngIf="error">
  <div class="custom-error">{{ genericErrorMessage }}</div>
</ng-container>
