如果用户选择的日期大于当前日期，如何在angular中使用反应式表单验证日期

如果用户选择的日期大于今天的日期，Cam angular建议如何使用angular中的被动形式验证日期。我想显示错误消息。如果用户选择大于今天日期

---

谢谢

您需要在HTML中使用日期输入的

min

和

max

属性，否则，您只能使用反应式表单来验证日期值的存在，即

验证器。必需

导入

FormsModule

和

ReactiveFormsModule

并在

app.module.ts中提供
DatePipe

app.module.ts

从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从'@angular/forms'导入{FormsModule，ReactiveFormsModule}；
@NGD模块({
声明：[]，
进口：[
浏览器模块，
FormsModule，
反应形式模块，
],
供应商：[
DatePipe，
],
引导：[AppComponent]，
})
导出类AppModule{}

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

app.component.ts

从'@angular/common'导入{DatePipe}；
从“@angular/core”导入{Component，OnInit}；
从'@angular/forms'导入{FormControl，FormGroup，Validators}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
})
导出类AppComponent实现OnInit{
表格：表格组；
起始日期：字符串；
endDate：字符串；
maxDate:字符串；
构造函数（日期管道：日期管道）{
const dateFormat='yyyy-MM-dd'；
this.startDate=datePipe.transform(
新日期（）.setDate（新日期（）.getDate（）-1），
日期格式
);
this.maxDate=this.endDate=datePipe.transform（新日期（），日期格式）；
}
ngOnInit（）：void{
this.form=new FormGroup({
startDate：新表单控件（this.startDate，Validators.required），
endDate：新表单控件（this.endDate，Validators.required），
});
}
onDateChange（）：void{
this.startDate=this.form.get（'startDate'）.value；
this.endDate=this.form.get（'endDate'）.value；
//这里还有一些重要的代码。。。
}  
}

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

app.component.html


开始日期
结束日期
尽管当前不存在默认角度验证器，但您可以根据当前日期为最小日期和最大日期设置验证器。您需要创建一个自定义验证器

从'@angular/forms'导入{FormControl}；
导出类日期验证器{
静态LessThanToday（控件：FormControl）：{[key:string]：any}{
今天开始：日期=新日期（）；
如果（新日期（控制值）>今天）
返回{“LessThanToday”：true}；
返回null；
}
}

将DateValidator类导入到创建反应式表单的组件中，并应用上述验证器。（可能需要调整，我没有测试过它。）
是否要阻止/禁用用户选择大于今天的日期？@vinay Somawat需要显示错误消息如果用户选择大于今天的日期，您可以在输入日期标记中放置onchange事件。一旦用户选择一个日期，它就会被触发，然后您可以验证所选日期并显示错误。如果你想要一个源代码，请告诉我。另外，请把你的R模板代码放在你已经尝试过的地方。