Angular 6 - 启动 <p-calendar> 所需条件答案

【问题标题】：Angular 6 - primeng <p-calendar> required conditionAngular 6 - 启动 <p-calendar> 所需条件
【发布时间】：2018-12-03 22:36:53
【问题描述】：

我正在使用 Angular 6 中的 PrimeNg 日历组件，并且我希望实现一个带有条件的 [required] 指令。一旦我用条件设置“必需”，无论条件是什么，它总是设置为真。

<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>

知道如何在模板驱动的表单中执行此操作吗？

【问题讨论】：

[required]="(Item.status === 'In Transit')? true : false" 不会工作？
很遗憾没有工作。
你能把它变成像 IsInTransit 这样的属性吗？

标签： angular primeng primeng-calendar

【解决方案1】：

动态添加或删除required 属性：

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

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

<p-calendar required>

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

<p-calendar>

【讨论】：

【解决方案2】：

*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>

【讨论】：

复制组件？这似乎不是最佳做法。
ngIf 指令不会发生在归属条件为假的 DOM 中。因此，考虑到性能问题，它不会产生负面影响。关于干净的代码？是的，有时你可以借用代码。