Angular Material

template 屬性的特別 errors

March 02 2026


引發我好奇的是遇到在 mat-datepicker 系統裡的屬性 [matDatepickerFilter] 自己丟出來的錯誤。

matDatepickerFilter 的功能是傳入一個函式,透過函式判斷月曆裡每個日期是否可被選擇。沒想到control value 的值如果被濾掉(不合格),control 會自動得到一個

{ matDatepickerFilter: true }。

於是問 ai material 還有沒有其他這種預設的 error, 列出的主要都是跟 date time 相關的元件,大部分跟日期的格式化有關,

這在做 dynamic form 統一處理錯誤的時候需要注意。

我請ai做一個test sample, 用 angular 20 測,

有興趣的可以進來試試看: 測試範例
以下是整理資料:

mat-datepicker 的屬性

  • [ matDatepickerFilter ],如果 control 的值被濾掉了,會出現這個錯誤。
{ "matDatepickerFilter": true }
  • [ matDatepickerMin ] / [ matDatepickerMax ],如果 control 的值小於 min / 大於 max,會出現這個錯誤。
{
    "matDatepickerMin": {
      "min": "2026-02-09T16:00:00.000Z", // min
      "actual": "2026-01-31T16:00:00.000Z" // control 值
    },
     "matDatepickerMax": {
      "max": "2026-02-19T16:00:00.000Z", // max
      "actual": "2026-02-24T16:00:00.000Z" // control 值
    }
}
  • [ matDatepickerParse ],如果手改日期導致格式壞掉,會出驗這個錯誤。
{
"matDatepickerParse": {
      "text": "not-a-date" // 目前input顯示字串,但 control value 會是 null 。
    }
}

mat-date-range 的屬性

  • [ rangeStart ] / [ rangeEnd ],如果 control 值不在範圍內,會出現這個錯誤。
{
"rangeStart": {
    "matStartDateInvalid": {
      "end": "2026-02-09T16:00:00.000Z",
      "actual": "2026-02-19T16:00:00.000Z"
    }
  },
  "rangeEnd": {
    "matEndDateInvalid": {
      "start": "2026-02-19T16:00:00.000Z",
      "actual": "2026-02-09T16:00:00.000Z"
    }
  },
}

mat-timepicker 的屬性

  • [ matTimepickerMin ] / [ matTimepickerMax ],如果 control 的值小於 min / 大於 max,會出現這個錯誤。
{
 "matTimepickerMax": {
      "max": "2026-02-15T10:00:00.000Z",
      "actual": "2026-02-15T11:30:00.000Z"
    }
 "matTimepickerMin": {
      "min": "2026-02-15T01:00:00.000Z",
      "actual": "2026-02-15T00:30:00.000Z"
    }
}
  • [ matTimepickerParse ]如果手改日期導致格式壞掉,會出現這個錯誤。
{
  "matTimepickerParse": {
      "text": "25:99"
    }
}


Error Key來源功能
matDatepickerFilterdatepickerfilterFn 回傳 false
matDatepickerMindatepicker小於 min
matDatepickerMaxdatepicker大於 max
matDatepickerParsedatepickerparse 失敗
matStartDateInvalidrangestart parse 失敗
matEndDateInvalidrangeend parse 失敗
matTimepickerMintimepicker小於 min
matTimepickerMaxtimepicker大於 max
matTimepickerParsetimepickerparse 失敗
  • Angular
  • Angular Material
  • Reactive form