如何为缺货日实施自定义日期验证
How to implement a custom date validation for Out of Stock days
我正在尝试实现一个自定义日期验证器,我可以在其中检查输入的日期是否不在无效日期列表中(自定义日期数组,例如:['08/20', '08/24', '08/31']
)(缺货)使用Angular 反应形式。
我的验证器看起来像这样:
export function OutOfStockValidator(invalidDates: any): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (!invalidDates) { return null; }
let isInvalid = false;
for (const i in invalidDates) {
const d = moment(control.value).format('MM' ) + '/' + moment(control.value).format('DD');
if (d == invalidDates[i]) { isInvalid = true; }
}
return isInvalid ? { outOfStock: true } : null;
};
}
控件的定义如下所示:
this.form = this._formBuilder.group({
installDate: new FormControl(null, [Validators.required, OutOfStockValidator(this._order.InvalidDates['CARPET_AM'])]),
...
});
这是我的模板:
<div class="form-group">
<div class="row">
<label [for]="installDate" class="col-md-12 col-form-label font-weight-bold">Install Date</label>
<div class="col-md-12">
<kendo-datepicker #installDate formControlName="installDate" placeholder="" class="form-control col-md-6" [min]="today">
<ng-template kendoCalendarMonthCellTemplate let-date>
<span [ngClass]="isInvalidDate(date)">{{date.getDate()}}</span>
</ng-template>
</kendo-datepicker>
</div>
</div>
<div *ngIf="submitted && f.installDate.outOfStock" class="invalid-feedback d-block">
<p>Selected date is not available for selection</p>
</div>
</div>
小部件运行良好,但无法显示我的自定义消息:无法选择所选日期。
有什么想法吗?谢谢!
问题是您没有正确检查 *ngIf
中的错误。
这个*ngIf="submitted && f.get('installDate').errors?.outOfStock"
应该有预期的效果。
我正在尝试实现一个自定义日期验证器,我可以在其中检查输入的日期是否不在无效日期列表中(自定义日期数组,例如:['08/20', '08/24', '08/31']
)(缺货)使用Angular 反应形式。
我的验证器看起来像这样:
export function OutOfStockValidator(invalidDates: any): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (!invalidDates) { return null; }
let isInvalid = false;
for (const i in invalidDates) {
const d = moment(control.value).format('MM' ) + '/' + moment(control.value).format('DD');
if (d == invalidDates[i]) { isInvalid = true; }
}
return isInvalid ? { outOfStock: true } : null;
};
}
控件的定义如下所示:
this.form = this._formBuilder.group({
installDate: new FormControl(null, [Validators.required, OutOfStockValidator(this._order.InvalidDates['CARPET_AM'])]),
...
});
这是我的模板:
<div class="form-group">
<div class="row">
<label [for]="installDate" class="col-md-12 col-form-label font-weight-bold">Install Date</label>
<div class="col-md-12">
<kendo-datepicker #installDate formControlName="installDate" placeholder="" class="form-control col-md-6" [min]="today">
<ng-template kendoCalendarMonthCellTemplate let-date>
<span [ngClass]="isInvalidDate(date)">{{date.getDate()}}</span>
</ng-template>
</kendo-datepicker>
</div>
</div>
<div *ngIf="submitted && f.installDate.outOfStock" class="invalid-feedback d-block">
<p>Selected date is not available for selection</p>
</div>
</div>
小部件运行良好,但无法显示我的自定义消息:无法选择所选日期。
有什么想法吗?谢谢!
问题是您没有正确检查 *ngIf
中的错误。
这个*ngIf="submitted && f.get('installDate').errors?.outOfStock"
应该有预期的效果。