DateTimePicker not showing values

Question

I am using the angular datepicker (https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker) to pick a range of dates in a component, then proceed to send a Instant[] to my java backend and store it in my db.

However when I try to load the data from by database and show the range previously selected by the user in the datepicker component it does not show.

Here is the html code, for my date picker

       <div class="input-group form-control-lg" id="validity">
              <input id="validity-date" [owlDateTimeTrigger]="dt13"  [owlDateTime]="dt13"
                     placeholder ="Validity range of the survey"
                     [(ngModel)]="validityDate"
                     [selectMode]="'range'" class="form-control cursor-pointer"/>
              <owl-date-time [pickerMode]="'dialog'" #dt13></owl-date-time>
            </div>

Here is what I do in the .ts file:

 this.surveyOfferRepository.getById(this.companyId, this.surveyId).subscribe(surveyOffer => {      
        this.validityDate = surveyOffer.validityDate;
      }

I do get the Instant[] from my java backend, which is treated as Date[] in my angular app, it's just not shown in the front to the user, and I don't see any errors in the console. Here is what I get when I debug the typescript:

I have read the documentation, and many examples, but I can't find any examples of what I want to do, is this component not able to provide what I want ? Do you have any ideas on what I'm doing wrong ? Or how I should proceed ?

Answer 1

Well I managed to "solve" the issue by adding a form and the dates I want inside, however i would consider this as a "quick fix", and not really answering the issue of why does ngModel works for a single date but not for a range.

  <form [formGroup]="formSurvey" class="container">
                  <input id="validity-date" [owlDateTimeTrigger]="dt1"  [owlDateTime]="dt1"
                         placeholder ="Validity range of the survey"
                         formControlName="dates"
                         [selectMode]="'range'" class="form-control cursor-pointer"/>
                  <owl-date-time [pickerMode]="'dialog'" [showSecondsTimer]="false"  #dt1></owl-date-time>
                </form>

With the form setup

  private setUpForm() {
    return new FormGroup({
      dates: new FormControl('', Validators.compose([
        Validators.required
      ])),
    });
  }