angular - 无法读取未定义 Angular 的属性“ngbDateParserFormatter”

Question

在输入字段的自定义验证函数中，我使用 ngbDateParserFormatter 将 ngBootstrap 日期对象转换为普通日期格式。

但是在转换时它不断出错

无法读取未定义的属性“ngbDateParserFormatter”

我ngbDateParserFormatter之前在该文件中的几个地方使用过，并且工作正常。

我的验证码：-

export class ApplyLeaveComponent {
  constructor(
    private panelService: PanelService,
    private router: Router,
    private fb: FormBuilder,
    private ngbDateParserFormatter: NgbDateParserFormatter,
    private toastr: ToastrService
  ) {}

  ngOnInit() {}

  applyLeave(data) {
    if (this.totalLeave - this.availedLeaves.length <= 0) {
      this.toastr.error("", "No Remaining Leaves", { positionClass: "toast- bottom-right" });
    } else {
      this.submitted = true;
      if (this.leaveForm.invalid) {
        return;
      } else {
        var leaveData = {
          financialYear: this.financialYear.id,
          profileId: this.userDetails.profileId,
          emailFrom: this.userDetails.email,
          leaveFromDate: this.ngbDateParserFormatter.format(data.value.leaveFromDate),
          leaveToDate: this.ngbDateParserFormatter.format(data.value.leaveToDate),
          leaveType: data.value.leaveType,
          leaveReason: data.value.leaveReason,
          notifyPerson: data.value.notifyPerson,
          reportingPerson: data.value.reportingPerson
        };
        this.applyLeaveService.SaveLeave(leaveData).subscribe(
          res => {
            console.log(res);
            this.leaveForm.reset();
            this.submitted = false;
            this.toastr.success("", "Leave applied Successfully", {
              positionClass: "toast-bottom-right"
            });
          },
          err => {
            console.log(err);
            this.toastr.error("", "Error on Applying", { positionClass: "toast-bottom-right" });
          }
        );
      }
    }
  }

  dateValidation(control: AbstractControl): { [key: string]: any } | null {
    var currentvalue = control.value;
    console.log(currentvalue);
    var selectedDate = this.ngbDateParserFormatter.format(currentvalue);

    let dateFormat = require("dateformat");
    let now = new Date();
    var today = dateFormat(now, "dd mm yyyy");
    console.log(today);

    return null;
  }
}

control.value是一个有值的日期对象{year: 2019, month: 6, day: 6}

谁能解决？

标签： angularangular7

Answer 1

我不知道dateValidation您的代码中究竟在哪里使用，但要修复该错误，您需要绑定this到您的自定义验证器，dateValidation. 这是因为该dateValidation方法的上下文在被 Reactive Form 调用时FormControl没有引用到您的 main ApplyLeaveComponent。

例如，您可以通过执行以下操作this来绑定：dateValidation

yourForm = this.fb.group({
  leaveFromDate: [null, [this.dateValidation.bind(this)]],
});