PrimeNG Calendar (p-calendar) 不会重置手动输入

Question

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

我正在使用 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)] 绑定的值设置为 null。希望对您有所帮助！

PrimeNG Calendar (p-calendar) 不会重置手动输入

PrimeNG Calendar (p-calendar) won't reset manual input

angular

angular2-forms

primeng