Angular：循环依赖

Question

为什么 this.currentdate.getTime() 中的 currentdate 返回未定义？

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;
  }

}

Answer 1

不使用 .bind() 设置验证

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

我认为您可以在方法中定义 currentDate 变量。

 const currentdate: Date = new Date();

我认为你应该 return 这样的东西。

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;
    };
  }

Answer 2

当您执行类似 this.mainservice.getcurrenttime.bind(this) 的操作时，它会创建一个绑定函数。

由于上面创建的绑定函数，在您的情况下 getcurrenttime() 方法 this 将被称为 YourComponent 实例。

由于组件没有声明任何名为 currentdate 的属性，this.currentdate 将导致 undefined 并尝试在其上读取 getTime()将导致错误。

以下是您可以使用的一些备选方案：

将其绑定到 mainservice 实例

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

Return 来自 getcurrenttime 的 ValidatorFn，如下所示，这样您就不会丢失 this 上下文。 （我会推荐这种方法）

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

// Within YourComponent
this.mainservice.getcurrenttime()

将getcurrenttime定义为箭头函数，就不需要使用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(...)

Angular：循环依赖

Angular: Cyclic Dependency

validation

angular

angular-custom-validators

以下是您可以使用的一些备选方案：