表单组上的角度自定义跨字段验证未按日期字段的预期工作

Question

我有一个包含开始日期和结束日期的表单。开始日期应为第二天，结束日期应至少为开始后7天。我正在使用Angular材质日期选择器，并为这两个字段设置minDate值。我有一个FormGroup级别的自定义验证器，用于验证7天逻辑，如果验证失败，则会显示"结束日期"字段的错误消息。

如果我手动键入"结束日期"的旧日期，则验证工作正常，并显示错误消息。但是，如果我将开始日期更改为将来的日期，然后选择结束日期以使验证失败，则不会显示错误消息。基本上，只有当日期早于最初设置的minDate值时，才会显示错误消息。对于结束日期大于minDate的任何验证失败，都不会显示错误。

我的HTML代码-

<form [formGroup]="dateForm" >
<mat-form-field color="green" appearance="fill" [style.width.px]=300>
<mat-label>Start Date</mat-label>
<input matInput [matDatepicker]="picker2" [min]="minDateStart" [max]="maxDate" formControlName="startDate" on/>
<mat-error>
<p *ngIf="dateForm.controls.startDate.dirty && dateForm.controls.startDate.errors?.required" class="alert alert-danger">This is a required field</p>
<p *ngIf="dateForm.controls.startDate.dirty && dateForm.controls.startDate.errors?.invalidStartDate" class="alert alert-danger">
{{ dateForm.controls.startDate.errors?.invalidStartDate.message}} </p>
</mat-error>
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 color="primary"></mat-datepicker>
</mat-form-field>
&nbsp;
<mat-form-field color="green" appearance="fill" [style.width.px]=300>
<mat-label>End Date</mat-label>
<input matInput [matDatepicker]="picker3" [min]="minDateEnd" [max]="maxDate" formControlName="endDate"/>
<mat-error>
<p *ngIf="dateForm.controls.endDate.touched && dateForm.controls.endDate.errors?.required" class="alert alert-danger">This is a required field</p>
<p *ngIf="dateForm.errors?.invalidEndDate" class="alert alert-danger">
{{ dateForm.errors?.invalidEndDate.message}} </p>
</mat-error>
<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
<mat-datepicker #picker3></mat-datepicker>
</mat-form-field>
</form>

我的TS文件-

const DATE_OFFSET_START = 1;
const DATE_OFFSET_END = 7;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Date Picker Validation Issue';
minDateStart: Date;
minDateEnd: Date;
maxDate: Date;
dateForm: FormGroup
constructor(
private formBuilder: FormBuilder) {
}
ngOnInit() {
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentDay = currentDate.getUTCDate();
const currentMonth = currentDate.getUTCMonth();
this.minDateEnd = new Date(currentYear, currentMonth, currentDay + DATE_OFFSET_START + DATE_OFFSET_END);
this.minDateStart = new Date(currentYear, currentMonth, currentDay + DATE_OFFSET_START);
this.maxDate = new Date(currentYear + 999, currentMonth, currentDay);
this.dateForm = this.formBuilder.group({
startDate: [this.minDateStart, [Validators.required, validateStartDate]],
endDate: [this.minDateEnd, [Validators.required]],
}, { validators: validateEndDate('startDate', 'endDate') });
}
}
// Validates the Form Group dates values.
// Returns error message if difference is less than specified limit.
export function validateEndDate(startDateFieldName: string, endDateFieldName: string) {
return (fg: FormGroup) => {
if (fg.get(endDateFieldName).value === undefined || fg.get(endDateFieldName).value == null)
return null;
let startDate = new Date(fg.get(startDateFieldName).value);
let endDate = new Date(fg.get(endDateFieldName).value);
return dateDifference(startDate, endDate) >= DATE_OFFSET_END ? null : {
invalidEndDate: {
message: "End Date should be atleast " + DATE_OFFSET_END + " days more than Start date!"
}
};
}
}

validateEndDate是验证开始日期和结束日期的自定义验证器{ validators: validateEndDate('startDate', 'endDate') });

这是显示错误的代码-

<p *ngIf="dateForm.controls.endDate.touched && dateForm.controls.endDate.errors?.required" class="alert alert-danger">This is a required field</p>
<p *ngIf="dateForm.errors?.invalidEndDate" class="alert alert-danger">
{{ dateForm.errors?.invalidEndDate.message}} </p>
</mat-error>

我不知道为什么只有当日期小于minDate值时才会显示错误，而不是针对所有验证错误。

Answer 1

我遇到这个问题不是因为我的自定义日期验证器，而是因为有角度的材料形式。我看到您没有在<input>标记中设置errorStateMatcher属性。当我使用这处房产时，一切都很好。如果要检查父窗体组是否无效，可以使用matInput的errorStateMatcher属性，如本文档所述。

例如：

在HTML:中带有errorStateMatcher的dueDate字段

<mat-form-field appearance="fill" class="full-width">
<mat-label>Due Date</mat-label>
<input matInput [matDatepicker]="picker"
formControlName="dueDate"
id="dueDate"
[min]="minDate"
[errorStateMatcher]="matcher">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker touchUi></mat-datepicker>
<mat-error *ngIf="createTaskForm.errors?.dueDateGtEqRepeatUntil">
DueDate should not be greater than or equal to Repeat Until Date.
</mat-error>
<mat-error *ngIf="createTaskForm.controls?.dueDate.hasError('required')">
Due date is required.
</mat-error>
</mat-form-field>

在TS文件中：

export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const invalidCtrl = control && control.invalid;
const invalidParent = control && control.parent && control.parent.invalid;
return (invalidCtrl || invalidParent) && (control.dirty || control.touched);
}
}

我希望这能解决你的问题。有关两个日期字段之间交叉验证的其他详细信息，此视频可能很有用。