ngBootstrap for Angular 4 DatePicker in a Reactive Form is Always Required

mtpultz picture mtpultz · May 26, 2017 · Viewed 9.9k times · Source

Using a reactive form I've added the ngbDatePicker:

<input type="text"
        id="business_incorp_date"
        class="form-control"
        formControlName="business_incorp_date"
        ngbDatepicker
        #incorporatedDatePicker="ngbDatepicker"
        (click)="incorporatedDatePicker.toggle()"
        readonly>

For a form model of:

this.form = this.formBuilder.group({
  id: [
    0, [Validators.required]
  ],

  // ... removed for brevity

  business_type: [
    '', [Validators.required]
  ],
  business_incorp_date: [
    '', [FormValidators.date] // <-- NOT REQUIRED BY MODEL
  ],
  business_desc: [
    '', [Validators.required]
  ]

  // ...
});

But, if the field is empty it is still ngInvalid for the ngbDateFormat:

{ "ngbDate": { "invalid": { "year": null, "month": null, "day": null } } }

Anyone know how to make the DatePicker field allow for an empty string?

Answer

mtpultz picture mtpultz · May 27, 2017

Answer provided by @pkozlowski.opensource via github issue that states that the model must be set to null to avoid validation on optional fields.