endDate>角度材质中的startDate

Question

我正在构建一个组件（html，css，spec.ts，ts），我总是想要endDate > startDate。我已经按照这个链接https://material.angular.io/components/datepicker/overview来制作多个日期选择器。

这是我用于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()中使用的ts代码是：

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

    });
  } 

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

Answer 1

既然你似乎采用了反应形式和模板驱动的混合，我会完全选择反应形式。在我看来，实施验证也更容易，更清洁。这也意味着，你可以完全放弃ngModel，我强烈建议，因为它可能导致意外问题有两个绑定（表单控件和ngModel）。编辑2/2019：从v7开始，现在也很幸运地将ngModel与反应形式一起使用。这在我看来很好，因为它被误用太多了！

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

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;
})

自定义验证器只检查结束日期是否比startdate更晚，如果有效则返回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">