Error Message 錯誤訊息
UOF X 所提供的錯誤訊息包含「純紅色文字錯誤訊息」與「紅底色條列式錯誤訊息方塊」。
Import 相依¶
純紅色文字錯誤訊息¶
使用方式是提供一個 control 給元件,control 可以接受FormControl
或AbstractControl
類型,而訊息出現的條件為control.dirty
為true
且有control.errors
的狀況下。
<input pInputText class="width-100" formControlName="textboxCtrl">
<uofx-error-tip [control]="form.controls.textboxCtrl"></uofx-error-tip>
可用的預設錯誤訊息¶
說明 | 顯示條件 (hasError) | 置換預設訊息 (properties) |
---|---|---|
必填 | required |
requiredText |
輸入重複 | duplicate |
duplicateText |
資料不存在 | notExist |
|
格式不正確 | email 、pattern |
formatIncorrectText |
超出範圍 | min 、max |
rangeText |
最大最小長度限制 | minLength 、maxlength |
minLengthText 、maxLengthText |
只允許字母及數字 | onlyDigitsOrLetters |
onlyDigitsOrLettersText |
比較值內容不同 | notEqual |
notEqualText |
修改錯誤訊息內容¶
舉例來說,可以在需要提示必填的情況下,將預設文字改為「身分證必填」,可以設定requiredText
,如此一來在uofx-error-tip
內偵測到control.hasError('required')
時就會顯示改訊息了。
紅底色條列式錯誤訊息方塊¶
錯誤訊息方塊為條列式呈現,所以接收的參數為陣列形式。
errorMessage
顯示錯誤訊息內容