如何對缺貨日實施自定義日期驗證

Question

我正在嘗試實現一個自定義日期驗證器，我可以在其中檢查輸入的日期是否不在無效日期列表中（自定義日期的數組，例如： ['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>

該小部件工作正常，但我無法顯示自定義消息：所選日期不可選擇。

任何想法？ 謝謝！

Answer 1

問題是您沒有在*ngIf正確檢查錯誤。

*ngIf="submitted && f.get('installDate').errors?.outOfStock"應該具有預期的效果。