反应形式的条件自定义验证不起作用-Angular 9

Question

我一定遗漏了什么：

<input
formControlName="endDate"
type="date"
id="endDate"
class="form-control"
(change)="onDateChange()"
required
/>
<div *ngIf = "timesheetForm.get('endDate').errors?.invalidEndDate">
<small class="text-danger"> TTTT</small></div>

和.ts

this.timesheetForm = this.fb.group({
endDate: ["", DateValidators.invalidEndDate],
}, {
validator: DateValidators.invalidEndDate
});
const endDateControl = this.timesheetForm.get('endDate');
endDateControl.valueChanges.subscribe((value) => {
if (value) {
this.timesheetForm.get('endDate').setValidators([DateValidators.invalidEndDate]);
} else {
this.timesheetForm.get('endDate').clearValidators();
}
});

这是我的自定义验证器

export class DateValidators {
static invalidEndDate(formGroup: FormGroup): ValidationErrors | null  {
let startDateTimestamp: number;
let endDateTimestamp: number;
for (const controlName in formGroup.controls) {
if (controlName.indexOf("startDate") !== -1) {
startDateTimestamp = Date.parse(formGroup.controls[controlName].value);
}
if (controlName.indexOf("endDate") !== -1) {
endDateTimestamp = Date.parse(formGroup.controls[controlName].value);
}
}
return (endDateTimestamp < startDateTimestamp) ? { invalidEndDate : true} : null;
}

它返回invalidEndDate:true，因此验证按预期工作，但我无法正确显示错误消息。

Answer 1

验证器Fn接口

一个接收控件并同步返回验证错误映射(如果存在(的函数，否则为null。

基于angular.io文档：

interface ValidatorFn {
(control: AbstractControl): ValidationErrors | null
}

您必须在验证器构造函数中使用控件，而不是formGroup。