结束日期 > 开始日期 angular material

Question

我正在 angular 中构建一个组件（html、css、spec.ts、ts），我总是希望在其中 endDate > startDate.我按照这个 link 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>

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

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

自定义验证器只是检查结束日期是否晚于开始日期，如果有效，returns 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">

结束日期 > 开始日期 angular material

endDate > startDate in angular material

validation

datepicker

angular-material

angular2-forms

angular2-formbuilder