如何在Angular模板驱动表单中验证开始与结束日期？

Let's wrap up your date input form with proper validation logic—including ensuring the end date doesn't come before the start date. Here's a polished, functional implementation:

Full Template Code #

<form #dateForm="ngForm" (ngSubmit)="onSubmit(dateForm)">
  <label class="control-label">Start Date</label>
  <input 
    type="date" 
    name="startDate" 
    placeholder="Start Date" 
    class="form-control" 
    ngModel 
    required 
    #startDate="ngModel"
    (change)="validateDateRange()"
  >
  <span *ngIf="!startDate.valid && startDate.touched" class="error-msg">
    <span *ngIf="startDate.errors?.required">Start Date is required</span>
  </span>
  <br/>

  <label class="control-label">End Date</label>
  <input 
    type="date" 
    name="endDate" 
    placeholder="End Date" 
    class="form-control" 
    ngModel 
    required 
    #endDate="ngModel"
    (change)="validateDateRange()"
  >
  <span *ngIf="!endDate.valid && endDate.touched" class="error-msg">
    <span *ngIf="endDate.errors?.required">End Date is required</span>
    <span *ngIf="endDate.errors?.dateBeforeStart">End Date cannot be earlier than Start Date</span>
  </span>
  <br/>

  <button type="submit" class="btn btn-primary" [disabled]="!dateForm.valid">Submit</button>
</form>

Component Logic (TypeScript) #

Add this to your component class to handle the cross-date validation:

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-date-range-form',
  templateUrl: './date-range-form.component.html',
  styleUrls: ['./date-range-form.component.css']
})
export class DateRangeFormComponent {
  // Template references to the date inputs
  @ViewChild('startDate') startDate!: HTMLInputElement;
  @ViewChild('endDate') endDate!: HTMLInputElement;

  validateDateRange() {
    const start = new Date(this.startDate.value);
    const end = new Date(this.endDate.value);

    // Clear previous range error first
    if (this.endDate.errors?.dateBeforeStart) {
      delete this.endDate.errors['dateBeforeStart'];
      this.endDate.control.setErrors(this.endDate.errors);
    }

    // Check if end date is earlier than start date
    if (start && end && end < start) {
      this.endDate.control.setErrors({
        ...this.endDate.errors,
        dateBeforeStart: true
      });
    }
  }

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted successfully:', form.value);
      // Add your API call or data processing logic here
    }
  }
}

Key Features Explained #

• Required Validation: Both date fields use the required attribute, with error messages that only appear when the field is touched and invalid.
• Date Range Check: The validateDateRange() method triggers whenever either date is changed. It compares the two dates and adds a custom error to the end date if it's earlier than the start date.
• Disabled Submit Button: The submit button stays disabled until the entire form is valid, preventing invalid submissions.
• Template-Driven Form: We're using Angular's template-driven approach (since you're already using ngModel), which is ideal for simpler forms like this.

Optional Styling #

Add this CSS to make error messages more noticeable:

.error-msg {
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25rem;
  display: block;
}

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