Angular Material日期选择器为空时Update按钮禁用不生效问题排查

问题核心原因 #

• 校验逻辑仅覆盖当前触发修改的单个日期输入框，未全局校验所有firstPatientInDate和lastPatientInDate字段的空值状态。你当前的逻辑是只要当前修改的输入框不为空、格式正确，就会把disableUpdateBtn设为false，完全忽略了其他可能为空的输入框。
• disableDate函数的空值校验逻辑错误：你先将字段值传入new Date()再判空，而new Date(null)会生成合法的1970-01-01日期对象，后续的date1 != null && date2 != null判断永远为true，空值场景直接被漏判。同时空值判断写在date1 > date2的条件分支内，空值场景根本不会触发错误标记。
• 清空日期的clearDate操作没有触发校验逻辑，点击清空按钮将日期设为null后，不会更新disableUpdateBtn的状态。
• 页面初始化时未执行全局校验，初始状态下所有输入框为空时按钮可能默认处于启用状态。

修复方案 #

第一步：重写全局校验函数，同时覆盖空值校验和日期大小校验 #

原有的disableDate函数逻辑存在缺陷，可以直接废弃，替换为以下函数：

// 新增全局校验所有日期的函数
checkAllDateValid(): boolean {
  let allValid = true;
  for (let i = 0; i < this.milestoneData.maintenanceCountryAssumption.length; i++) {
    for (let j = 0; j < this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement.length; j++) {
      const item = this.milestoneData.maintenanceCountryAssumption[i].trialDesignElement[j];
      // 先判空，只要有一个日期为空就校验不通过
      if (!item.firstPatientInDate || !item.lastPatientInDate) {
        allValid = false;
        item.lpiError = true;
        continue;
      }
      // 空值校验通过后再校验日期大小
      const date1 = new Date(item.firstPatientInDate);
      const date2 = new Date(item.lastPatientInDate);
      if (date1 > date2) {
        allValid = false;
        item.lpiError = true;
      } else {
        item.lpiError = false;
      }
    }
  }
  return allValid;
}

第二步：简化dateValidator逻辑，每次修改都执行全局校验 #

dateValidator(input: Date | null, ii, i) {
  // 直接用全局校验结果控制按钮状态
  this.disableUpdateBtn = !this.checkAllDateValid();
  console.log(this.disableUpdateBtn ? "Date is Invalid!!" : "Date is Valid!!");
}

第三步：清空日期操作后主动触发校验 #

在你现有的clearDate函数末尾添加一行校验逻辑，更新按钮状态：

clearDate(ii, i, fieldName) {
  // 你原有的清空逻辑保持不变
  // 末尾新增校验逻辑
  this.disableUpdateBtn = !this.checkAllDateValid();
}

第四步：页面初始化时执行一次全局校验 #

在组件ngOnInit生命周期钩子或者milestoneData数据加载完成的回调中调用校验，确保初始状态按钮禁用：

ngOnInit() {
  // 你的其他初始化逻辑保持不变
  this.disableUpdateBtn = !this.checkAllDateValid();
}

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