如何以角度形式验证开始日期和结束日期答案

【问题标题】：How to validate start date and end date in angular formly如何以角度形式验证开始日期和结束日期
【发布时间】：2020-09-20 16:05:18
【问题描述】：

我有两个简单的字段（输入）开始日期和结束日期我只是希望结束日期不应小于开始日期

我正在使用角度 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 date

form.html
contains formly code of form

【问题讨论】：

标签： json angular typescript angular8 angular-formly

【解决方案1】：

您可以使用 Angular 材质日期选择器

https://material.angular.io/components/datepicker/examples

然后转到此部分

具有最小和最大验证的日期选择器

您可以在此处添加具有最小和最大验证的 Datepicker。

另一种方法是您可以使用自定义验证器来检查结束日期不应小于开始日期

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">

【讨论】：

【解决方案2】：

实现这一目标的最佳方式是使用反应式形式。您可以创建一个包含所有表单控件的 formGroup，现在创建一个自定义验证器并将其附加到您的表单。请阅读有关自定义验证器用法的文档：https://angular.io/guide/form-validation

【讨论】：