Angular Material mat-datepicker日期校验未按预期生效问题

问题原因 #

• 空值校验执行顺序错误：你在空值校验if (!!input)之前就执行了包含input.length > 0的日志打印逻辑，当input为null时，这行代码会优先触发null属性读取错误，空值校验完全没有起到拦截作用。
• 校验逻辑存在类型冲突：当input是合法Date类型时，Date对象本身不存在length属性，即便用户选择了有效日期，input.length > 0的判断也会返回false，导致你的校验规则无法正常生效。

修复方案 #

调整代码执行顺序，同时针对不同输入类型做兼容判断，修复后代码如下：

dateValidator(input) {
    // 前置空值拦截，所有涉及input属性读取的逻辑都放在这之后
    if (!input) {
        this.disableUpdateBtn = true;
        console.log("Date is Invalid!!");
        return;
    }

    const isDate = Object.prototype.toString.call(input) === '[object Date]';
    const dateValid = !this.disableDate();
    // Date类型无需判断length，字符串类型的输入值判断长度即可
    const hasValidValue = isDate ? true : input.length > 0;

    console.log(isDate, dateValid, hasValidValue);
    if (isDate && dateValid && hasValidValue) {
        this.disableUpdateBtn = false;
        console.log("Date is Valid!!");
    } else {
        this.disableUpdateBtn = true;
        console.log("Date is Invalid!!");
    }
}

调整后空值会被提前拦截，不会触发属性读取错误，同时兼容了日期选择和手动输入两种场景的校验逻辑，可以满足你清除日期后按钮禁用、输入合法日期后按钮启用的需求。

内容的提问来源于stack exchange，提问作者Mr.M