Validation 结束日期>；角材料中的起始日期

我正在构建一个组件（

html

，

css

，

spec.ts

，

ts

），其中我总是希望

endDate>startDate

。我跟随这个链接是为了创建多个日期选择器

这是我用于startDate和endDate的

html

开始日期：

<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
   <mat-form-field>
      <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
      <mat-datepicker #picker1></mat-datepicker>
   </mat-form-field>
</div>

<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
   <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
</div>

---

我非常确定我必须在

validateForm（）

代码中进行一些更改，但我不确定我必须进行哪些更改

因为您似乎要使用反应式表单和模板驱动的混合，所以我会完全选择反应式表单。在我看来，实现验证也更容易、更干净。这也意味着，您可以同时删除

ngModel

，我强烈建议这样做，因为它可能会导致两个绑定（表单控件和ngModel）出现意外问题编辑2019年2月：很幸运，自v7以来，现在也不允许使用ngModel和被动表单。这在我看来是好的，因为它被滥用的方式太多了

因此，构建表单并附加自定义验证器。如果您有一个较大的表单，我会将自定义验证器附加到一组嵌套的日期，正如本例中所示，只要表单发生任何更改，验证器就会启动，不管是日期字段还是其他字段

构造函数（私有formBuilder:formBuilder）{
this.unavailabilityForm=this.formBuilder.group({
起始日期：['']，
截止日期：['']
}，{validator:this.checkDates}）；
}

如果您在稍后阶段获取变量

不可用性

的值，可以使用

patchValue

或

setValue

将值分配给表单控件：

this.unavailabilityForm.setValue({
startDate:this.unavailability.startDate；
endDate：this.unavailability.endDate；
})

自定义验证程序只需检查结束日期是否晚于开始日期，如果有效，则返回

null

，然后返回自定义验证错误：

checkDates（组：FormGroup）{
if（group.controls.endDate.value

然后，您可以在模板中显示此自定义错误：

无效

还要记住在表单标记中标记此表单组：

  validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
      'startDate': [''],
      'endDate': ['']

    });
  }