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