结束日期角材料中的开始日期 [英] endDate > startDate in angular material

问题描述

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

这是我用于 startDate 和 endDate 的 html.

开始日期:

<mat-form-field><input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [只读]="!componentPermission.writePermission"><mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle><mat-datepicker #picker1></mat-datepicker></mat-form-field>

结束日期:

<mat-form-field><input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [只读]="!componentPermission.writePermission"><mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle><mat-datepicker #picker2></mat-datepicker></mat-form-field>

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

 validateForm() {this.unavailabilityForm = this.formBuilder.group({'开始日期': ['']，'结束日期': ['']});}

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

解决方案

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

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

constructor(private formBuilder: FormBuilder) {this.unavailabilityForm = this.formBuilder.group({开始日期: ['']，结束日期: ['']}, {validator: this.checkDates});}

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

this.unavailabilityForm.setValue({开始日期:this.unavailability.startDate;结束日期:this.unavailability.endDate;})

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

checkDates(group: FormGroup) {if(group.controls.endDate.value < group.controls.startDate.value) {返回 { notValid:true }}返回空；}

然后你可以在模板中显示这个自定义错误:

还要记得在你的表单标签中标记这个表单组:

I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers.

This is the html which I have used for startDate and endDate.

startDate:

<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>

endDate:

<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>

The validateForm() code which I have used in the ts is:

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

    });
  } 

I am pretty sure I have to make some changes in the validateForm() code but I am not sure what changes I have to make.

解决方案

Since you seem to be going with a mix of reactive form and template driven, I would choose a reactive form completely. Implementing Validation is also in my opinion easier and cleaner. This also then means, you can drop ngModel altogether, which I would then strongly suggest, since it can cause unexpected issues to have two bindings (form control and ngModel). EDIT 2/2019: ngModel together with reactive forms are now also luckily not allowed since v7. That is in my opinion good, since it was misused way too much!

So build your form and attach a custom validator. In case you have a large form, I would attach the custom validator to a nested group of your dates, as it sits in this example, the validator is firing whenever there is any change in the form, doesn't matter if it's the date fields, or some other field.

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

If you are getting your values for variable unavailability at a later stage, you can use patchValue or setValue to assign the values to your form controls:

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

The custom validator simply checks that the end date is a later date than the startdate and returns null if it is valid, or then a custom validation error:

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

and then you can display this custom error in template with:

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

Also remember to mark this formgroup in your form tag:

<form [formGroup]="unavailabilityForm">

这篇关于结束日期角材料中的开始日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！