跳轉到

錯誤訊息

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

Import 相依

import { UofxErrorBlockModule, UofxErrorTipModule } from '@uofx/app-components/form';

純紅色文字錯誤訊息

使用方式是提供一個 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>

this.form = this.fb.group({
  textboxCtrl: [null, Validators.required]
});

可用的預設錯誤訊息

說明 顯示條件 (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')時就會顯示改訊息了。

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

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

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

  • errorMessage顯示錯誤訊息內容
transErrorCodes = ['輸入的訊息內容格式不正確'];

<uofx-error-block [errorMessage]="transErrorCodes" >
</uofx-error-block>