<ng-container *ngIf="!error && defDate !== undefined">
  <form [formGroup]="formGrp">
    <div class="row">
      <div class="col-2">
        <sts-form-options [formDir]="formDir" class="dropdown-sm" [populationData]="day" [model]="selectedDay"
        [placeHolder]="'DD'"
          (methodToExecute)="onDropdownChange($event, 'selectedDay')" [formGrp]="formGrp" [name]="nameDay" #dayCompt
          [hideError]="true">
        </sts-form-options>
      </div>
      <div class="col-1">
        <span class="separators">/</span>
      </div>

      <div class="col-2">
        <sts-form-options [formDir]="formDir" class="dropdown-sm" [populationData]="month" [model]="selectedMonth"
        [placeHolder]="'MM'"
          [formGrp]="formGrp" [name]="nameMonth" (methodToExecute)="onDropdownChange($event, 'selectedMonth')"
          #monthCompt
          [hideError]="true"></sts-form-options>
      </div>
      <div class="col-1">
        <span class="separators">/</span>
      </div>
      <div class="col-2">
        <sts-form-options [formDir]="formDir" class="dropdown-sm" [populationData]="year" [model]="selectedYear"

        [placeHolder]="'YYYY'"
          [formGrp]="formGrp" [name]="nameYear" (methodToExecute)="onDropdownChange($event, 'selectedYear')"
          [hideError]="true">
        </sts-form-options>
      </div>
    </div>
    <ng-container *ngIf="control1 && control2 && control3">
        <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)))">
                {{'Please key in a valid date' }}</div>
            </div>
          </div>
        </div>
      </ng-container>
  </form>
</ng-container>

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