角度材料中的 endDate > startDate

Posted 2023-03-13

【中文标题】角度材料中的 endDate > startDate

【英文标题】：endDate > startDate in angular material

【发布时间】：2018-05-05 02:15:48

【问题描述】：

我正在构建一个组件（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>

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

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

    );
   

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

【参考方案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;
)

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