Error Message 錯誤訊息

UOF X 所提供的錯誤訊息包含「純紅色文字錯誤訊息」與「紅底色條列式錯誤訊息方塊」。

兩種錯誤提示都在UofxFormModule內。

Import 相依

import { UofxFormModule } from '@uofx/web-components/form';

純紅色文字錯誤訊息

使用方式是提供一個 control 給元件，control 可以接受FormControl或AbstractControl類型，而訊息出現的條件為control.dirty為true且有control.errors的狀況下。

textboxCtrl = new FormControl();

<uofx-form-error-tip [control]="textboxCtrl"></uofx-form-error-tip>

可用的預設錯誤訊息

說明	顯示條件 (hasError)
必填	required
上傳檔案必填	fileRequired
輸入重複	duplicate
資料不存在	notExist
格式不正確	email``pattern
超出範圍	min、max
最大最小長度限制	minLength、maxlength
只允許字母及數字	onlyDigitsOrLetters
比較值內容不同	notEqual

修改錯誤訊息內容

舉例來說，可以在需要提示必填的情況下，將預設文字改為「身分證必填」，可以設定requiredText，如此一來在uofx-form-error-tip內偵測到control.hasError('required')時就會顯示改訊息了。

<uofx-form-error-tip
  [control]="textboxCtrl"
  [requiredText]="身分證必填">
</uofx-form-error-tip>

還有其他可設定的文字訊息如下：

• duplicateText
• fileRequiredText
• formatIncorrectText
• maxLengthText
• minLengthText
• notEqualText
• onlyDigitsOrLettersText
• rangeText

紅底色條列式錯誤訊息方塊

錯誤訊息方塊為條列式呈現，所以接收的參數為陣列形式。

• showClose為是否顯示右方的 [x] 關閉按鈕
• showHeader為是否顯示錯誤訊息區塊標題

transErrorCodes = ['輸入的訊息內容格式不正確'];

<uofx-error-block 
  [uofErrorI18nKeys]="transErrorCodes" 
  [showClose]="true" 
  [showHeader]="true"
  [textEllipsis]="true">
</uofx-error-block>