Угловой 6 - примергобязательное условие

Question

Я использую календарный компонент PrimeNg в angular 6 и хочу реализовать директиву [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>

Есть идеи, как я могу сделать это в форме на основе шаблона?

Answer 1

Для динамического добавления или удаления атрибута required:

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

Если условие истинно, создается атрибут required без значения (из-за ''):

<p-calendar required>

, иначе атрибут required полностью исключен (из-за null):

<p-calendar>

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