Needless UI

元件

輸入遮罩

在輸入時自動格式化的文字欄位：日期、信用卡號、IBAN 和各類代碼。

匯入

import-mask.ts
import { nuiCardMask, nuiIbanMask, NuiMask } from '@needless-ui/angular/mask';

NuiMask

套用在原生文字欄位上的遮罩。

選擇器
input[nuiMask]
匯出為
nuiMask
名稱型別預設值說明
nuiMask輸入string | ((raw: string) => string)遮罩，或依已輸入資料挑選遮罩的函式。
tokens輸入Record<string, NuiMaskToken>要加入或取代的遮罩字元。
unmask輸入booleanfalse值只包含資料，不含固定字元。
value雙向繫結string''值：顯示的內容；設定 unmask 時則為資料。
raw屬性Signal<string>已輸入的資料，不含固定字元。
complete屬性Signal<boolean>遮罩中的每個位置是否都已填滿。

Helpers

用於格式化、驗證和建立遮罩的函式。

名稱型別預設值說明
nuiMaskFormat, nuiUnmask方法(value, mask) => string用遮罩格式化一個值，或從格式化後的值取出資料。
nuiCardMask方法(raw: string) => string卡號遮罩，依卡別印在卡片上的方式分組。
nuiCardBrand方法(number: string) => NuiCardBrand | null依卡號開頭的數字判斷出的卡別。
nuiCardValid, nuiLuhn方法(number: string) => boolean卡號長度是否符合其卡別，並通過 Luhn 檢查。
nuiIbanMask方法(raw: string) => stringIBAN 遮罩，長度與該國的 IBAN 相同。
nuiIbanValid方法(iban: string) => booleanIBAN 長度是否符合其所屬國家，且檢查碼正確。