Question

我正在使用以下代码创建日期选择器。

<input (dateChange)="dateChanged()" class="editable-form-field" *ngIf="isEditable" [satDatepicker]="rosterHireDate" [(ngModel)]="roster.probationDate" [min]="minStartDateForClass" readonly matInput>
<sat-datepicker *ngIf="isEditable" #rosterHireDate [rangeMode]="false"></sat-datepicker>
<sat-datepicker-toggle *ngIf="isEditable" style="position: absolute; right: 0;" matSuffix [for]="rosterHireDate"></sat-datepicker-toggle>

但是当我尝试创建如下所示的多个日期选择器时，会引发错误

<ng-template ngFor let-roster [ngForOf]="rosters" let-i="index">
    <input (dateChange)="dateChanged()" class="editable-form-field" *ngIf="isEditable" [satDatepicker]="rosterHireDate" [(ngModel)]="roster.probationDate" [min]="minStartDateForClass" readonly matInput>
    <sat-datepicker *ngIf="isEditable" #rosterHireDate [rangeMode]="false"></sat-datepicker>
    <sat-datepicker-toggle *ngIf="isEditable" style="position: absolute; right: 0;" matSuffix [for]="rosterHireDate"></sat-datepicker-toggle>
</ng-template>

错误：

ERROR TypeError: Cannot read property 'rangeMode' of undefined
    at SatDatepickerInput._minValidator (saturn-datepicker.js:4215)
    at forms.js:658
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:658)
    at SatDatepickerInput._validator (forms.js:623)
    at SatDatepickerInput.push../node_modules/saturn-datepicker/fesm5/saturn-datepicker.js.SatDatepickerInput.validate (saturn-datepicker.js:4522)
    at forms.js:923
    at forms.js:658
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:658)

然后我意识到我必须提供一个不同的＃值，但不确定如何执行此操作。有没有一种方法可以使用动态生成的ID创建多个日期选择器？

我正在使用称为“土星日期选择器”的第三方日期选择器，因为我们希望能够在应用程序的其他部分中选择日期范围。

Angular2：多个日期选择器

0 个答案: