如果用户选择的日期大于今天的日期，如何使用角度的反应形式验证日期答案

【问题标题】：How to validate date using reactive form in angular if user select date greater than today date如果用户选择的日期大于今天的日期，如何使用角度的反应形式验证日期
【发布时间】：2021-07-15 10:42:40
【问题描述】：

如果用户选择的日期大于今天的日期，任何人都建议如何使用角度的反应形式验证日期。我想显示错误消息。如果用户选择大于今天的日期

谢谢

【问题讨论】：

您想阻止/禁止用户选择比今天大的日期吗？
@vinay Somawat 如果用户选择的日期大于今天，则需要显示错误消息
您可以在输入日期标签中放置 onchange 事件。一旦用户选择日期，它将被触发，然后您可以验证所选日期并显示错误。如果您需要源代码，请告诉我。
另外，请将您的模板代码放入您迄今为止尝试过的内容。

标签： angular

【解决方案1】：

您可以根据当前日期被动地设置最小和最大日期的验证器，尽管当前不存在默认的 Angular 验证器。您需要创建一个自定义验证器..

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

export class DateValidator {

   static LessThanToday(control: FormControl): { [key: string]: any } {
        let today : Date = new Date();

       if (new Date(control.value) > today)
           return { "LessThanToday": true };

       return null;
   }
}

将 DateValidator 类导入到创建响应式表单的组件中，并应用上述验证器。（它可能需要调整，我还没有测试过..）

【讨论】：

【解决方案2】：

您需要在 HTML 中使用日期输入的 min 和 max 属性，否则，您只能使用响应式表单来验证日期值的存在，即 Validators.required。

导入FormsModule和ReactiveFormsModule并在app.module.ts中提供DatePipe

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [
    DatePipe,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

使用app.component（或您想要的组件）中的DatePipe 设置当前日期并格式化日期值。在ngOnInit 函数中设置默认日期值。使用表单作为输入的父元素（虽然不是必需的）。

app.component.ts

import { DatePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  form: FormGroup;
  startDate: string;
  endDate: string;
  maxDate: string;

  constructor(datePipe: DatePipe) {
    const dateFormat = 'yyyy-MM-dd';
    this.startDate = datePipe.transform(
      new Date().setDate(new Date().getDate() - 1),
      dateFormat
    );
    this.maxDate = this.endDate = datePipe.transform(new Date(), dateFormat);
  }

  ngOnInit(): void {
    this.form = new FormGroup({
      startDate: new FormControl(this.startDate, Validators.required),
      endDate: new FormControl(this.endDate, Validators.required),
    });
  }

  onDateChange(): void {
    this.startDate = this.form.get('startDate').value;
    this.endDate = this.form.get('endDate').value;
    // some other important code here...
  }  
}

在HTML文件中，设置startDate日期输入的max属性不超过endDate日期输入值；反之亦然：将endDate 日期输入的min 属性设置为不超过startDate 日期输入值

app.component.html

<form [formGroup]="form">
  <div>
    <div>
      <label for="start_date">Start date</label>
      <input id="start_date" type="date" [max]="maxDate > endDate ? endDate : maxDate" (change)="onDateChange()" formControlName="startDate">
    </div>
    <div>
      <label for="end_date">End date</label>
      <input id="end_date" type="date" [min]="startDate" [max]="maxDate" (change)="onDateChange()" formControlName="endDate">
    </div>
  </div>
</form>

【讨论】：