validation - 角度 Material 中的结束日期 > 开始日期

Question

我正在以角度构建一个组件(html、css、spec.ts、ts)我一直想要 endDate > startDate。我已点击此链接https://material.angular.io/components/datepicker/overview为了制作多个日期选择器。

这是我用于开始日期和结束日期的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>

我在ts中使用的validateForm()代码是:

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

    });
  } 

我很确定我必须在 validateForm() 代码中进行一些更改，但我不确定我必须进行哪些更改。

Answer 1

由于您似乎要混合使用响应式(Reactive)表单和模板驱动，因此我会完全选择响应式(Reactive)表单。在我看来，实现验证也更容易、更干净。这也意味着，您可以完全删除 ngModel，这是我强烈建议的，因为它可能会导致具有两个绑定(bind)(表单控件和 ngModel)的意外问题。 编辑 2/2019:幸运的是，自 v7 以来，现在也不允许 ngModel 与响应式(Reactive)表单一起使用。我认为这很好，因为它被滥用得太多了!

因此，构建您的表单并附加自定义验证器。如果您有一个大表单，我会将自定义验证器附加到您的日期的嵌套组中，就像在本示例中一样，只要表单中有任何更改，验证器就会触发，无论它是否是日期字段，或其他一些字段。

constructor(private formBuilder: FormBuilder) { 
  this.unavailabilityForm = this.formBuilder.group({
    startDate: [''],
    endDate: ['']
  }, {validator: this.checkDates});  
}

如果您稍后要获取变量 unavailability 的值，您可以使用 patchValue 或 setValue 将这些值分配给您的表单控件:

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

自定义验证器只是检查结束日期是否晚于开始日期，如果有效则返回 null，否则返回自定义验证错误:

checkDates(group: FormGroup) {
  if(group.controls.endDate.value < group.controls.startDate.value) {
    return { notValid:true }
  }
  return null;
}

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

<small *ngIf="unavailabilityForm.hasError('notValid')">Not valid</small>

另请记住在表单标记中标记此表单组:

<form [formGroup]="unavailabilityForm">