Mat日期开始日期结束日期验证角度8

Question

我正在使用Mat日期选择器，其中有开始日期和结束日期，其中有一个验证，即结束日期不应小于开始日期，例如

如果开始日期是2020年1月12日，则结束日期可以是2020年12月12日或更大，但不能是2020年11月11日。

目前我正在尝试使用Min MAX，但这并不像预期的那样工作

我在谷歌上试过；SO没有得到正确的

<mat-form-field>
<input matInput [matDatepicker]="fromDate" placeholder="Choose a date"
[value]="getData(item2.firstPatientInDate)" [max]="today<item2.lastPatientInDate|| item2.lastPatientInDate == undefined?today:item2.lastPatientInDate" [(ngModel)]="item2.firstPatientInDate">
<mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="pickerend" [max]="today" [min]="item2.firstPatientInDate"   placeholder="Choose a date"
[value]="getData(item2.lastPatientInDate)" [(ngModel)]="item2.lastPatientInDate">
<mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

Answer 1

您可以在下面的链接中找到一个工作示例：

stackblitz：角度材料开始结束日期样品

TypeScript文件

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
@Component({
selector: 'datepicker-value-example',
templateUrl: 'datepicker-value-example.html',
styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
startDate = new FormControl(new Date());
endDate = new FormControl(new Date());
}

HTML文件

<mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="Start Date" [formControl]="startDate">
<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="End Date"
[min]="startDate.value" [formControl]="endDate">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

Answer 2

使用这种方式与具有自定义验证的反应式表单

constructor(private formBuilder: FormBuilder) { 
this.yourForm = this.formBuilder.group({
startDate: [''],
endDate: ['']
}, {validator: this.checkDates});  
}
checkDates(group: FormGroup) {
if(group.controls.endDate.value < group.controls.startDate.value) {
return { notValid:true }
}
return null;
}

在您的前端中

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

Answer 3

尝试这种方式进行自定义日期范围验证

在HTML代码中，您可以在(dateChange(事件中看到。我创建了comparisonStartdateValidator和comparisonEnddateValidator方法来验证输入的日期范围。

HTML文件

<mat-form-field appearance="outline">
<mat-label> Covering Start Date </mat-label>
<input
matInput
[matDatepicker]="CovStartdate"
formControlName="covstartdate"
(dateChange)="comparisonStartdateValidator()"
required
/>
<mat-datepicker-toggle
matSuffix
[for]="CovStartdate"
></mat-datepicker-toggle>
<mat-datepicker #CovStartdate></mat-datepicker>
<mat-error
*ngIf="
formGroup.controls['covstartdate'].hasError('invaliddaterange')
"
>
<strong>Start date cannot be greater than end date</strong>
</mat-error>
<mat-error
*ngIf="formGroup.controls['covstartdate'].hasError('required')"
>
Covering Start date is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label> Covering End Date </mat-label>
<input
matInput
[matDatepicker]="CovEnddate"
formControlName="covenddate"
(dateChange)="comparisonEnddateValidator()"
required
/>
<mat-datepicker-toggle
matSuffix
[for]="CovEnddate"
></mat-datepicker-toggle>
<mat-datepicker #CovEnddate></mat-datepicker>
<mat-error
*ngIf="formGroup.controls['covenddate'].hasError('invaliddaterange')"
>
<strong>End date cannot be earlier than start date</strong>
</mat-error>
<mat-error
*ngIf="formGroup.controls['covenddate'].hasError('required')"
>
Covering End date is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>

日期范围图片初始

TS文件

在TS代码中，您可以在下面使用我的自定义验证。comparisonEnddateValidator方法验证结束日期，而comparisonStart dateValidator验证开始日期。

constructor() { 
formGroup: FormGroup = new FormGroup({
covenddate: new FormControl(),
covstartdate: new FormControl()
});
}
comparisonEnddateValidator(): any {
let ldStartDate = this.formGroup.value['covstartdate'];
let ldEndDate = this.formGroup.value['covenddate'];
let startnew = new Date(ldStartDate);
let endnew = new Date(ldEndDate);
if (startnew > endnew) {
return this.formGroup.controls['covenddate'].setErrors({ 'invaliddaterange': true });
}
let oldvalue = startnew;
this.formGroup.controls['covstartdate'].reset();
this.formGroup.controls['covstartdate'].patchValue(oldvalue);
return this.formGroup.controls['covstartdate'].setErrors({ 'invaliddaterange': false });
}
comparisonStartdateValidator(): any {
let ldStartDate = this.formGroup.value['covstartdate'];
let ldEndDate = this.formGroup.value['covenddate'];
let startnew = new Date(ldStartDate);
let endnew = new Date(ldEndDate);
if (startnew > endnew) {
return this.formGroup.controls['covstartdate'].setErrors({ 'invaliddaterange': true });
}
let oldvalue = endnew;
this.formGroup.controls['covenddate'].reset();
this.formGroup.controls['covenddate'].patchValue(oldvalue);
return this.formGroup.controls['covenddate'].setErrors({ 'invaliddaterange': false });
}

开始日期图片错误示例结束日期图片错误样本