Hi
I am getting error - Property 'appDateCompare' has no initializer and is not definitely assigned in the constructor.
@Directive({
selector: '[appDateCompare]',
standalone: true,
providers: [
{
provide: NG_VALIDATORS,
useExisting: DateCompareDirective,
multi: true
}
]
})
export class DateCompareDirective implements Validator {
@Input('appDateComparison') appDateCompare: string; // FormControlName for DOB
validate(control: AbstractControl): ValidationErrors | null {
const dtStart0 = control.root.get(this.appDateCompare);
if (!dtStart0 || !dtStart0.value || !control.value) {
return null;
}
const dtStart = new Date(dtStart0.value);
const dtEnd = new Date(control.value);
if (dtEnd <= dtStart) {
return { 'dateComparison': true };
}
return null;
}
}
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>Start Date</mat-label>
<input matInput [matDatepicker]="picker" formControlName="startDate" required>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<mat-form-field class="example-full-width" appearance="outline">
<mat-label>End Date</mat-label>
<input matInput [matDatepicker]="picker1" appDateComparison="startDate" formControlName="endDate" required>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
@if (sessionForm.get('endDate')?.hasError('required')|| sessionForm.get('endDate')?.touched) {
<mat-error>
{{displayErrMessage.required}}
</mat-error>
}
</mat-form-field>
Thanks