角度自定义反应式表单验证器不起作用

Question

我正在尝试实现一个用于日期范围检查的自定义角度验证器。

验证器本身工作正常并返回验证错误。但是，客户端似乎没有发生任何事情 - 没有显示任何错误，并且表单被认为是有效的。我尝试了对这段代码进行各种更改，但没有快乐。

关于尝试什么的任何想法？

>Html：

<div class="alert-danger" *ngIf="form.controls.creditCheckDate.errors?.dateRange">
Date should be from 1/1/2000 to Today.
</div>

.ts：

const controlsConfig = {
creditCheckDate: ['', [Validators.required,
CustomValidators.dateRange(new Date(2000, 1), new Date(Date.now()))]]
};
return this.fb.group(controlsConfig);

验证人：

static dateRange(minDate: Date | null, maxDate: Date | null): ValidatorFn {
return (c: AbstractControl): ValidationErrors | null => {
const validationError = { dateRange: true };
if (!c.value) {
return null;
}
const timestamp = Date.parse(c.value);
if (isNaN(timestamp)) {
return validationError;
}
const date = new Date(timestamp);
if ((minDate && minDate > date) || (maxDate && maxDate < date)) {
return validationError;
}
return null;
};
}

Answer 1

请看一下我的代码。

.HTML

<form [formGroup]="testForm">
<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input
type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
formControlName = "date"
/>
</div>
<div *ngIf="testForm.controls.date.invalid && (submitted)" class="text-danger">
<small *ngIf="testForm.controls.date.errors?.required">
Date is required
</small>
<small *ngIf="testForm.controls.date.errors?.dateRange">
Date is invalid
</small>
</div>
</div>
<button type="button" (click)="onSubmit()">Submit</button>
</form>

TS

import { Component } from "@angular/core";
import {
AbstractControl,
FormGroup,
FormControl,
ValidationErrors,
ValidatorFn,
Validators
} from "@angular/forms";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
testForm: FormGroup;
submitted: boolean;

constructor() {
this.testForm = new FormGroup({
date: new FormControl("", [Validators.required, this.dateRange(new Date(2000, 1), new Date(Date.now()))])
});
this.submitted = false;
}

dateRange(minDate: Date | null, maxDate: Date | null): ValidatorFn {
return (c: AbstractControl): ValidationErrors | null => {
const validationError = { dateRange: true };

if (!c.value) {
return null;
}

const timestamp = Date.parse(c.value);
if (isNaN(timestamp)) {
return validationError;
}

const date = new Date(timestamp);
if ((minDate && minDate > date) || (maxDate && maxDate < date)) {
return validationError;
}

return null;
};
}

onSubmit() {
this.submitted = true;
console.log(this.testForm);
}
}

我已经在代码沙箱中尝试了您的代码，它似乎工作正常。 https://codesandbox.io/s/suspicious-http-11288

Answer 2

所以事实证明我没有提供所有信息。问题是有人在其他验证器中重置表单的所有错误。这是一种糟糕的做事方式，因为我很长一段时间都找不到它，但它就在那里。当我找到并修复它时，一切都开始按预期工作。