PrimeNG p-calendar无required验证器，求替代解决方案

Absolutely, even though PrimeNG's p-calendar doesn’t include a dedicated built-in required validator, you can easily implement mandatory date validation using Angular’s native form tools. Here are the most practical approaches tailored to your reactive forms setup:

1. Use Angular’s Built-in Validators.required (Simplest Approach) #

Since you’re using formControlName, attaching Angular’s native Validators.required directly to your form control is the quickest fix. This validator checks if the control has a non-null value, which aligns perfectly with p-calendar (it returns null when no date is selected).

Component Code: #

import { FormControl, Validators } from '@angular/forms';

// Inside your component class
today = new Date();
startDateControl: FormControl = new FormControl(null, Validators.required);

Updated Template Code: #

Add the required attribute to the p-calendar element for better accessibility (helps screen readers identify the field as mandatory), then display an error message when validation fails:

<p-calendar 
  formControlName="startDateControl" 
  [minDate]="today" 
  showIcon="true"
  required
></p-calendar>

<!-- Show error only after user interacts with the field -->
<div *ngIf="startDateControl.invalid && (startDateControl.touched || startDateControl.dirty)">
  <small class="text-danger">Start date is required</small>
</div>

2. Custom Validator (For Edge Cases) #

If you need more control—like combining required validation with additional date rules (e.g., ensuring the date isn’t in the past beyond your minDate)—create a custom validator:

import { FormControl, ValidatorFn } from '@angular/forms';

// Custom validator to enforce required + valid date logic
const dateRequiredAndValid: ValidatorFn = (control: FormControl) => {
  // Check if no date is selected
  if (!control.value) {
    return { required: true };
  }
  // Optional: Add extra validation (e.g., ensure date isn't before today)
  const selectedDate = new Date(control.value);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  if (selectedDate < today) {
    return { invalidPastDate: true };
  }
  return null;
};

// Initialize control with the custom validator
startDateControl: FormControl = new FormControl(null, dateRequiredAndValid);

Update your error display to handle both validation states:

<div *ngIf="startDateControl.invalid && (startDateControl.touched || startDateControl.dirty)">
  <small class="text-danger" *ngIf="startDateControl.errors?.required">Start date is required</small>
  <small class="text-danger" *ngIf="startDateControl.errors?.invalidPastDate">Date cannot be before today</small>
</div>

Key Takeaways: #

• Angular’s Validators.required works flawlessly with p-calendar because it relies on the form control’s value state.
• The required attribute in the template is optional but strongly recommended for accessibility.
• Always check if the control is touched or dirty before showing errors to avoid confusing users on initial page load.

内容的提问来源于stack exchange，提问作者Debo