【问题标题】:Cannot read property 'ngbDateParserFormatter' of undefined Angular无法读取未定义 Angular 的属性“ngbDateParserFormatter”
【发布时间】:2019-06-27 12:17:15
【问题描述】:

我正在使用 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}

谁能解决?

【问题讨论】:

  • this 未定义。这是函数/类范围的问题。你能分享更多的代码吗?尤其是你定义dateValidation的类和你使用它的类。
  • 我的验证函数在类中是正确的
  • this 好像是未定义的,出现错误时如何调用applyLeavedateValidation
  • datevalidation 函数仅在我从 datepicker 中选择日期并且发生时间错误时触发。我也可以通过智能自动获取this 及其在验证函数中的值
  • 请分享代码在哪里/如何使用dateValidation

标签: angular angular7


【解决方案1】:

我不知道您的代码中究竟在哪里使用了dateValidation,但要修复该错误,您需要将this 绑定到您的自定义验证器dateValidation。这是因为dateValidation 方法的上下文在被响应式表单FormControl 调用时没有引用到您的主ApplyLeaveComponent

例如,您可以通过以下操作将this 绑定到dateValidation

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

【讨论】:

  • 它运行良好.. 您能否附上一些相关文档以了解我的代码为什么不起作用?
  • @AmeerPappay 嗯.. 正如我在回答中提到的那样,这是因为 this 的上下文没有引用您的 ApplyLeaveComponent 类。你可以在这里阅读更多关于this的信息(developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
猜你喜欢
  • 2017-11-09
  • 1970-01-01
  • 1970-01-01
  • 2016-01-12
  • 2015-09-08
  • 2016-05-12
  • 2019-07-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多