Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 946
mtpultz Avatar asked May 25 '17 23:05

mtpultz


1 Answers

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

like image 58
mtpultz Avatar answered Oct 30 '22 04:10

mtpultz