Ramco Ramco

Ramco Ramco

  • 442
  • 3.4k
  • 528.5k

Property 'dob' does not exist on type 'EmpAddEditComponent'

Jun 27 2024 10:55 AM

Hi

  I want that Dob should be greater than doj . and minimum difference between the two should be 1 year.

ON below line i am getting error - Property 'dob' does not exist on type 'EmpAddEditComponent'

<input matInput [matDatepicker]="picker" [appDateCompare]="dob" formControlName="doj">

<form [formGroup]="empForm" ngSubmit="Save()"> 
    <div mat-dialog-content class="content">
        <div class="row">
            <mat-form-field>
                <mat-label>Choose a date</mat-label>
                <input matInput [matDatepicker]="picker" formControlName="dob">
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
                <mat-label>Choose a date</mat-label>
                <input matInput [matDatepicker]="picker" [appDateCompare]="dob" formControlName="doj">
                <mat-hint>MM/DD/YYYY</mat-hint>
                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>

            </mat-form-field>
        </div>
    </div>
    <div mat-dialog-actions class="action">
        <button mat-raised-button color="warning">Cancel</button>
        <button mat-raised-button color="primary" (click)="OnSave()">Save</button>
    </div>
</form> 

---------------TYPESCRIPT
export class EmpAddEditComponent implements OnInit {

  empForm : FormGroup;
  constructor(private _fb : FormBuilder){
    this.empForm = this._fb.group({
      dob:'',
      doj:'',
    })
  }
}

*************** DIRECTIVE  
import { Directive, Input, forwardRef } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms'; 

@Directive({
  selector: '[appDateRangeValidator]',
  standalone: true,
  providers: [{ provide: NG_VALIDATORS, useExisting: DateRangeValidatorDirective, multi: true }]
})

export class DateRangeValidatorDirective implements Validator {
  @Input('appDateCompare') compareDate: Date;

  validate(control: AbstractControl): ValidationErrors | null {
    const currentDate = new Date(control.value);
    if (this.compareDate && currentDate) {
      if (currentDate < this.compareDate) {
        return { 'dateCompare': true }; // Validation failed
      }
    }
    return null; // Validation passed
  }
}

 


Answers (1)