Angular: Cyclic Dependency-CodePudding

Why is currentdate in this.currentdate.getTime() coming back as undefined?

newlisting = this.formBuilder.group({
    availabledate: new FormGroup({
      xyz: new FormControl()
    },[this.mainservice.getcurrenttime.bind(this)])
})

@Injectable({providedIn: 'root'})
export class MainService {

  constructor(){}
 
  currentdate: Date = new Date();

  getcurrenttime(control: FormGroup){

    console.log(this.currentdate.getTime())  <~~ Generates Error!!!

    if(condition){
      return {date: true};
    }
    return null;
  }

}

CodePudding user response：

set validate without .bind()

newlisting = this.formBuilder.group({
    availabledate: new FormGroup({
      XYZ: new FormControl()
    },[this.mainservice.getcurrenttime()])
})

I think you can define that currentDate variable inside the method.

 const currentdate: Date = new Date();

and I think you should return something like this.

getCurrentTime(): ValidatorFn {
    return (formGroup: FormGroup): ValidationErrors | null => {
      const currentDate: Date = new Date();

      const year = formGroup.get('year').value;
      const month = formGroup.get('month').value;
      const day = formGroup.get('day').value;

      const selectedDate = new Date(year, month, day, 0, 0, 0, 0);

      if (selectedDate === currentDate) {
        formGroup.setErrors({ any_error: true }); // on your form group
        return null;
      } else return null;
    };
  }

CodePudding user response：

When you do something like this.mainservice.getcurrenttime.bind(this), it creates a bound function.

Due to the above created bound function, in your case within getcurrenttime() method this would be referred to as YourComponent instance.

Since the component doesn't have any property named currentdate declared, this.currentdate will result in undefined and trying to read getTime() on it will result in an error.

Below are few of the alternatives you can use:

Bind it to the mainservice instance

this.mainservice.getcurrenttime.bind(this.mainservice)

Return a ValidatorFn from getcurrenttime as below, so that you don't lose the this context. (I would recommend this approach)

// Within MainService
getcurrenttime(): ValidatorFn {
  return (control: AbstractControl) => {
    console.log(this.currentdate.getTime());
    // Your logic
    return null;
  }
}

// Within YourComponent
this.mainservice.getcurrenttime()

Define getcurrenttime as an arrow function and then you don't need to use bind.

// Within MainService
getcurrenttime = (control: AbstractControl) => {
  console.log(this.currentdate.getTime());
  // Your logic
  return null;
}

// Within YourComponent
this.mainservice.getcurrenttime  // No need to use .bind(...)

Should I write methods as arrow functions in Angular class