如何以角度格式验证开始日期和结束日期
如何以角度格式验证开始日期和结束日期
提问于 2020-06-02 16:20:54
我有两个简单的字段(输入)，开始日期和结束日期，我只希望结束日期不应该早于开始日期
我使用的是angular 8我使用的是ng模块
因此，我从myfile.json文件中创建了两个文本字段，并用我的日期函数(validation.ts)在HTML中对它们进行了验证，代码如下
现在我想验证两个日期，我是新的angular开发人员，请帮助
json code
{
"className": "col-md-6 col-xs-12",
"key": "graduationstartdate",
"type": "input",
"templateOptions": {
"label": "Course start Date",
"appearance": "outline"
}
},
{
"className": "col-md-6 col-xs-12",
"key": "graduationenddate",
"type": "input",
"templateOptions": {
"label": "Course End Date",
"appearance": "outline"
}validation.ts
it contains a function to validate the dateform.html
contains formly code of form回答 2
Stack Overflow用户
发布于 2020-06-02 16:55:52
实现这一目标的最好方法是使用反应式。您可以创建一个包含所有表单控件的formGroup，现在可以创建一个自定义验证器并将其附加到您的表单。请阅读有关自定义验证器用法的文档：https://angular.io/guide/form-validation
Stack Overflow用户
发布于 2020-06-03 05:03:29
您可以使用角度材料日期选择器
https://material.angular.io/components/datepicker/examples
然后转到这个部分
带最小和最大验证的
数据选择器
您可以在此处添加带最小和最大验证的日期选择器。
另一种方法是，您可以使用自定义验证器来检查结束日期不应早于开始日期
constructor(private formBuilder: FormBuilder) {
this.formGroup= this.formBuilder.group({
startDate: [''],
endDate: ['']
}, {validator: this.checkDates});
}如果稍后要获取变量不可用的值，则可以使用patchValue或setValue将这些值分配给表单控件：
this.formGroup.setValue({
startDate: this.formGorup.startDate;
endDate: this.formGroup.endDate;
})自定义验证器只需检查结束日期是否晚于开始日期，如果有效，则返回null，否则返回自定义验证错误：
checkDates(group: FormGroup) {
if(group.controls.endDate.value < group.controls.startDate.value) {
return { notValid:true }
}
return null;
}然后，您可以使用以下命令在模板中显示此自定义错误：
<small *ngIf="formGroup.hasError('notValid')">Not valid</small>此外，请记住在表单标记中标记此表单组：
<form [formGroup]="formGroup">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62147747
复制相关文章
相似问题
腾讯云开发者
