Ramco Ramco

Ramco Ramco

  • 413
  • 3.4k
  • 499.6k

Error - Property 'appDateCompare' has no initializer

Jun 28 2024 4:21 AM

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


Answers (1)