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

Question

I'm making use of ng-bootstrap's ngbDatepicker in a Reactive Form in an Angular2 project, and the dates are optional, however ngbDatepicker always marks the form as Invalid unless a date is selected.

Is there a way to exclude ngbDatepicker from the form validation, or to configure it so that it returns Valid whether it has a value set or not?

Answer 1

The issue was with how I was initializing the form values. I was setting the default values to empty strings where I should have been initializing the dates to null. So I was doing this:

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

When I should have been doing this:

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

Many thanks to @pkozlowski-opensource for the clarification.

Answer 2

In response to the accepted answer and the fact it will not work for subsequent updates, I've used the following hack to make sure the control will be valid if no or an invalid date is inserted.

Pretty nasty to change the value in a validator if you ask me, but get's the job done until the ngb-datepicker sets the value internally.

Custom validator on the desired control:

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