custom validation not work in one specific condition how to fix it?

  validateGroups() {                                                        
    const groupsArray = this.theForm.get('groups') as UntypedFormArray;

    groupsArray.controls.forEach((group: AbstractControl) => {
      const startDate = group.get('hg_start_date');
      const endDate = group.get('hg_end_date');

      if (startDate.value && endDate.value && startDate.value > endDate.value) {
        endDate.setErrors({ 'invalidRange': true });
        startDate.setErrors({ 'invalidRange': true });
      } else if (startDate.value == null && endDate.value) {
        startDate.setErrors({ 'fieldRequired': true });
      } else if (startDate.value && endDate.value == null) {
        endDate.setErrors({ 'fieldRequired': true });
      } else {
        startDate.setErrors(null);
        endDate.setErrors(null);
      }
    });
    this.theForm.updateValueAndValidity();
  }

                                    <div *ngIf="data?.uwat_master_type == '10'" class="form-control" fxFlex="auto" fxFlex.gt-lg="25" class="pad12" fxLayout="row" fxLayout.gt-sm="row" fxLayoutGap="10px">
                                        <div fxFlex>
                                            <app-sys-datepicker formControlName="hg_start_date" type="dateAlign" (dateChanged)="validateHolidayGroup($event,i,group)" placeholder="{{ 'start_date' | translate}}"></app-sys-datepicker>
                                            <small class="error-blk" *ngIf="theForm.get('groups').at(i).get('hg_start_date').touched">
                                                <div class="validation-error"
                                                    *ngIf="theForm.get('groups').at(i).get('hg_start_date').hasError('fieldRequired')">
                                                    {{'field_required' | translate}}
                                                </div>
                                            </small>
                                        </div>

                                        <div fxFlex>
                                            <app-sys-datepicker formControlName="hg_end_date" type="dateAlign" (dateChanged)="validateHolidayGroup($event,i,group)" placeholder="{{ 'end_date' | translate}}"></app-sys-datepicker>
                                            <small class="error-blk" *ngIf="theForm.get('groups').at(i).get('hg_end_date').touched">
                                                <div class="validation-error"
                                                    *ngIf="theForm.get('groups').at(i).get('hg_end_date').hasError('invalidRange')">
                                                    {{'invalid_date_range' | translate}}
                                                </div>
                                            </small>
                                            <small class="error-blk" *ngIf="theForm.get('groups').at(i).get('hg_end_date').touched">
                                                <div class="validation-error"
                                                    *ngIf="theForm.get('groups').at(i).get('hg_end_date').hasError('fieldRequired')">
                                                    {{'field_required' | translate}}
                                                </div>
                                            </small>
                                        </div>
                                    </div>

this validation does not working which means when the page loads first time , if i change either of start date or end date only it doesnt work, but if change either of the one first then change another it works!! only invalidRange have problem

i have tried so many debugging its not working