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?

It should work correctly, we even got a test covering this use-case: https://github.com/ng-bootstrap/ng-bootstrap/blob/02bbc8134d8dc47deea892a819d70bd65e18c13f/src/datepicker/datepicker-input.spec.ts#L204-L211 Are you sure that you've got a `null` / `undefined` model as opposed to, for example, an empty string? If you still face the problem please open an issue with a minimal reproduce scenario. — pkozlowski.opensource, May 09 '17 at 14:42
That was the problem - thank you! I was initializing the values in the model with empty strings, initializing the date fields with null solves the problem. — Stephen R. Smith, May 09 '17 at 14:59

score 6 · Accepted Answer · answered May 09 '17 at 15:05

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.

For me this only works on initialization. When I change the value, even to `null` using a `NgbDateParserFormatter`, the form control will be invalid. — Dormouse, Jun 02 '17 at 13:39

score 1 · Answer 2 · answered Jun 02 '17 at 14:45

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

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

2 Answers2

Linked