html - 如何将自定义消息提供给 Prime-NG 中必填字段的日历

Question

如何将自定义消息提供给 Prime-NG 中必填字段的日历。

如果表单已提交，我们将收到默认消息请填写此字段，但我们可以获得 p-calendar 的自定义消息。

我试过了

<p-calendar [showIcon]="true" required="true" requiredMessage="Please select date.">

<p-calendar [showIcon]="true" required="true "oninvalid="this.setCustomValidity('Please select the Date')"
oninput="this.setCustomValidity('')"  />

上面的代码仅适用于不使用 p 日历的输入标签。

如何解决这个问题。

Answer 1

A 您使用模板驱动的表单，您必须使用 ngModel 来绑定值。

所以<p-calendar>使用ngModel.

<p-calendar name="calendar" #calendar="ngModel" [(ngModel)]="calendarDate"  
 showTime="showTime" hourFormat="24" [utc]="true" required></p-calendar>

并在无效时处理需要验证。

<div *ngIf="f.submitted && calendar.invalid" class="invalid-feedback">
    <div *ngIf="calendar.errors.required">Date is required</div>
</div>

工作演示