即使未选择任何值，如何在表单中标记 ngbDatepicker 有效

Question

我在 Angular2 项目的 Reactive Form 中使用 ng-bootstrap 的 ngbDatepicker，日期是可选的，但是 ngbDatepicker 总是将表单标记为无效，除非选择了日期。

有没有办法将 ngbDatepicker 从表单验证中排除，或者对其进行配置使其 returns 无论是否设置值都有效？

Answer 1

问题在于我如何初始化表单值。我将默认值设置为空字符串，而我本应将日期初始化为 null。所以我这样做了：

  replicantForm = this.fb.group({
      name: ['', Validators.required],
      incepdate: '',
      longevity: ''
  })

我应该这样做的时候：

  replicantForm = this.fb.group({
      name: ['', Validators.required],
      incepdate: null,
      longevity: ''
  })

非常感谢@pkozlowski-opensource 的澄清。

Answer 2

为了响应已接受的答案以及它不适用于后续更新的事实，我使用了以下 hack 来确保控件在没有插入日期或插入无效日期时有效。

如果你问我，更改验证器中的值非常讨厌，但在 ngb-datepicker 内部设置值之前完成工作。

所需控件上的自定义验证器：

validateOptionalDate(control: AbstractControl) {
  if (!(control.value instanceof Object) && control.value !== null) {
    control.patchValue(null, {
      onlySelf: true,
      emitEvent: false,
      emitModelToViewChange: true,
      emitViewToModelChange: false
    });
  }
}

即使未选择任何值，如何在表单中标记 ngbDatepicker 有效

How to mark ngbDatepicker Valid in form even when no value is selected

ng-bootstrap

angular

ngb-datepicker