Question

我在Angular2应用程序中使用p-calendar，我遇到了一些奇怪的行为。如果我在日历小部件的帮助下插入日期值，则在我对表单组中的.reset()函数进行调用后，它将成功重置。我遇到的问题是，当用户手动将日期输入日历输入字段时，在调用.reset()后它不会被清除。如果我尝试获取字段的值，它将返回正确的默认值（null），但输入字段仍显示先前已插入的值，已提交。

我正在使用PrimeNG 2.0.6 。

我有什么办法可以重置输入字段中的值吗？

Answer 1

我找到了解决方案（解决方法）。我在提交数据后使用ngIf来隐藏和显示表单。这似乎触发了该领域正确重置它的价值。

Answer 2

经过几个小时的研究，并尝试了许多方法之后，我才找到了解决方案，希望对其他人有所帮助。该解决方案很简单，并且对我有效：

HTML

<button class="button button-3 button-3a clear" (click)="clearfilter();">
 <i class="fa fa-close"></i> {{'Clear Filters' | translate}}
</button>
<p-table #dt [columns]="cols" 
             [value]="profitsConfig" 
             [rows]="10" 
             [rowsPerPageOptions]="[5,10,20,50,100]"
             [paginator]="true" 
             [resizableColumns]="true" 
             columnResizeMode="expand" 
             [scrollable]="true"
             [(selection)]="mySelection" 
             selectionMode="multiple" 
             exportFilename="ProfitsConfig"
             [showCurrentPageReport]="true" 
             currentPageReportTemplate="Total: {{dt.totalRecords}}">
    ...
<p-calendar #createCalendar appendTo="body" 
            [(ngModel)]="rangeDatesCreate" 
            *ngSwitchCase="'createdate'"
            selectionMode="range" dateFormat="dd/mm/yy" 
            placeholder="dd/mm/yy - dd/mm/yy"
            (onSelect)="dt.filter($event,col.field, 'dateRangeFilter')" 
            [monthNavigator]="true" [yearNavigator]="true"
            yearRange="1990:2050" [readonlyInput]="true">
</p-calendar>

当我调用该函数清除所有过滤器时：

TypeScript

rangeDatesCreate: Date[];

constructor(){}

clearfilter() {
  this.rangeDatesCreate = null;
  ....
}

因此，我将null绑定的值设置为[(ngModel)]。我希望这会有所帮助！

PrimeNG日历（p-calendar）不会重置手动输入

2 个答案: