Angular 6 - primeng <p-calendar> 所需条件

Question

我正在使用 angular 6 中的 PrimeNg 日历组件，我希望实现一个带有条件的 [required] 指令。一旦我设置 "required" 条件，它总是设置为 true，无论条件是什么。

<p-calendar 
  [required]="Item.status === 'In Transit'"
  [(ngModel)]="Item.actualPickup" showTime="true" 
  hourFormat="24" showSeconds="true" dateFormat="dd/mm/yy" 
  [showIcon]="true" showButtonBar="true" hideOnDateTimeSelect="true">
</p-calendar>

知道如何以模板驱动的形式执行此操作吗？

Answer 1

*ngIf

在你对指令没有深入了解的情况下总是有帮助的。

使用

<p-calendar *ngIf = "myboolean == true" 
  [required]="Item.status === 'In Transit'"
  [(ngModel)]="Item.actualPickup" showTime="true" 
  hourFormat="24" showSeconds="true" dateFormat="dd/mm/yy" 
  [showIcon]="true" showButtonBar="true" hideOnDateTimeSelect="true">
</p-calendar>

<p-calendar *ngIf = "myboolean == false" 
  [required]="Item.status = true"
  [(ngModel)]="Item.actualPickup" showTime="true" 
  hourFormat="24" showSeconds="true" dateFormat="dd/mm/yy" 
  [showIcon]="true" showButtonBar="true" hideOnDateTimeSelect="true">
</p-calendar>

Answer 2

要动态添加或删除 required 属性：

<p-calendar [required]="Item.status === 'In Transit' ? '' : null">

当条件为真时，这会产生没有值的 required 属性（因为 ''）：

<p-calendar required>

否则 required 属性被完全忽略（因为 null）：

<p-calendar>

Angular 6 - primeng <p-calendar> 所需条件

Angular 6 - primeng <p-calendar> required condition

primeng

angular

primeng-calendar