问题描述
我正在使用有角日期选择器(https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker)在组件中选择日期范围,然后继续将Instant[]
发送到Java后端并将其存储在数据库中。
但是,当我尝试从数据库加载数据并在datepicker组件中显示用户先前选择的范围时,
这是我的日期选择器的HTML代码
<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>
这是我在.ts文件中所做的:
this.surveyOfferRepository.getById(this.companyId,this.surveyId).subscribe(surveyOffer => {
this.validityDate = surveyOffer.validityDate;
}
我确实从我的Java后端获得了Instant[]
,在我的有角度的应用程序中它被视为Date[]
,只是没有显示在用户的前面,而且我看不到任何错误在控制台中。
这是调试打字稿时得到的:
我已经阅读了文档和许多示例,但是找不到我想要做的任何示例,此组件无法提供我想要的吗? 您对我做错了什么有想法吗?还是我应该如何进行?
解决方法
我设法通过添加一个表单和我想要的日期来“解决”该问题,但是我将其视为“快速修复”,但并未真正回答ngModel为什么在单个日期上起作用的问题而不是一定范围。
<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>
使用表单设置
private setUpForm() {
return new FormGroup({
dates: new FormControl('',Validators.compose([
Validators.required
])),});
}