如何在angular formly中验证开始日期和结束日期。

Question

我有两个简单的字段（输入）的开始日期和结束日期，我只是想结束日期不能小于开始日期。

我使用的是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 date

form.html
contains formly code of form

Answer 1

最好的方法是使用reactive form来实现。你可以创建一个formGroup，它将容纳所有的formcontrols，现在创建一个自定义验证器并将其附加到你的表单中。请阅读关于自定义验证器的使用文档。https:/angular.ioguideform-validation）。

Answer 2

你可以使用Angular材料日期选择器

https:/material.angular.iocomponentsdatepickerexamples。

并进入本节

带有最小&最大验证的Datepicker。

在这里，你可以添加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">