Examples

Bug Testing

Mask common case

Secure Input

Mask: "XXX/X0/0000"

NgModel: {{ secureMask ? secureMask : 'Empty' }}

FormControl: {{ formSecureInput.value ? formSecureInput.value : 'Empty' }}

Other common cases

Mask: 00/00/00 00:00:00

Mask: 00:00:00

Mask: Hh:m0:s0

Mask: AAA 000-S0S

Mask: d0/M0/0000

Masks and special characters

You could define if you want special characters propagate to the model or not with the attribute dropSpecialCharacters.

Mask: 000.000.000-00

FormControl: {{ cpfFormControl.value ? cpfFormControl.value : 'Empty' }}

NgModel: {{ cpfModel ? cpfModel : 'Empty' }}

Clear if not match

You could clear the input if the value not match the mask, you'll just need to set clearIfNotMatch attribute.

Mask:000.000 0*.00

FormControl: {{ clearIfNotMatch.value ? clearIfNotMatch.value : 'Empty' }}

NgModel: {{ clearIfNotMatchModel ? clearIfNotMatchModel : 'Empty' }}

Percent mask

Mask:percent

FormControl: {{ percent.value ? percent.value : 'Empty' }}

Phone number

You can add prefix to you masked value

Mask: +7 (000) 000 00 00

FormControl: {{ form.value ? form.value : 'Empty' }}

NgModel: {{ dateModel ? dateModel : 'Empty' }}

Phone number

You can add 'showMaskTyped' property to see maskExpression with underscores while typing

Mask: +5 (000) 000 0000

FormControl: {{ form1.value ? form1.value : 'Empty' }}

NgModel: {{ showMaskModel ? showMaskModel : 'Empty' }}

Phone number

You can add 'placeHolderCharacter' property to changed the placeholder character used when displaying the mask.

Mask: +5 (000) 000 0000

FormControl: {{ form1.value ? form1.value : 'Empty' }}

NgModel: {{ showMaskModel ? showMaskModel : 'Empty' }}

suffix

You can add 'suffix' property

Mask: 0000.00

FormControl: {{ suffixForm.value ? suffixForm.value : 'Empty' }}

NgModel: {{ suffixModel ? suffixModel : 'Empty' }}

Number or string

You can pass in value of type number or string

Mask: 000.00

FormControl: {{ numberOrStringForm.value ? numberOrStringForm.value : 'Empty' }}

NgModel: {{ numberOrStringFormModel ? numberOrStringFormModel : 'Empty' }}

Repeat mask

You can pass into mask pattern with brackets

Mask: 00000

FormControl: {{ repeatForm.value ? repeatForm.value : 'Empty' }}

NgModel: {{ repeatFormModel ? repeatFormModel : 'Empty' }}

Thousand separator mask

You can divide your input by thousands

Mask: separator

FormControl: {{ separatorForm.value ? separatorForm.value : 'Empty' }}

NgModel: {{ separatorFormModel ? separatorFormModel : 'Empty' }}

Mask: separator thousandSeparator: .

FormControl: {{ dotSeparatorForm.value ? dotSeparatorForm.value : 'Empty' }}

NgModel: {{ dotSeparatorFormModel ? dotSeparatorFormModel : 'Empty' }}

Mask: separator thousandSeparator: ,

FormControl: {{ commaSeparatorForm.value ? commaSeparatorForm.value : 'Empty' }}

NgModel: {{ commaSeparatorFormModel ? commaSeparatorFormModel : 'Empty' }}

Mask: separator thousandSeparator: spacebar

FormControl: {{ spacebarSeparatorForm.value ? spacebarSeparatorForm.value : 'Empty' }}

NgModel: {{ spacebarSeparatorFormModel ? spacebarSeparatorFormModel : 'Empty' }}

Mask: separator thousandSeparator: (empty string)

FormControl: {{ emptySeparatorForm.value ? emptySeparatorForm.value : 'Empty' }}

NgModel: {{ emptySeparatorFormModel ? emptySeparatorFormModel : 'Empty' }}

Separator precision

You can set the precision for dot and comma separators

Mask: separator.2

FormControl: {{ separatorPrecisionSeparatorForm.value ? separatorPrecisionSeparatorForm.value : 'Empty' }}

NgModel: {{ separatorPrecisionSeparatorFormModel ? separatorPrecisionSeparatorFormModel : 'Empty' }}

Mask: separator.2 thousandSeparator: .

FormControl: {{ dotPrecisionSeparatorForm.value ? dotPrecisionSeparatorForm.value : 'Empty' }}

NgModel: {{ dotPrecisionSeparatorFormModel ? dotPrecisionSeparatorFormModel : 'Empty' }}

Mask: separator.2 thousandSeparator: ,

FormControl: {{ commaPrecisionSeparatorForm.value ? commaPrecisionSeparatorForm.value : 'Empty' }}

NgModel: {{ commaPrecisionSeparatorFormModel ? commaPrecisionSeparatorFormModel : 'Empty' }}

Mask: separator.2 thousandSeparator: spacebar

FormControl: {{ spacebarPrecisionSeparatorForm.value ? spacebarPrecisionSeparatorForm.value : 'Empty' }}

NgModel: {{ spacebarPrecisionSeparatorFormModel ? spacebarPrecisionSeparatorFormModel : 'Empty' }}

Mask: separator.0

FormControl: {{ separatorZeroPrecisionSeparatorForm.value ? separatorZeroPrecisionSeparatorForm.value : 'Empty' }}

NgModel: {{ separatorZeroPrecisionSeparatorFormModel ? separatorZeroPrecisionSeparatorFormModel : 'Empty' }}

Mask: separator.0 thousandSeparator: .

FormControl: {{ dotZeroPrecisionSeparatorForm.value ? dotZeroPrecisionSeparatorForm.value : 'Empty' }}

NgModel: {{ dotZeroPrecisionSeparatorFormModel ? dotZeroPrecisionSeparatorFormModel : 'Empty' }}

Mask: separator.0 thousandSeparator: ,

FormControl: {{ commaZeroPrecisionSeparatorForm.value ? commaZeroPrecisionSeparatorForm.value : 'Empty' }}

NgModel: {{ commaZeroPrecisionSeparatorFormModel ? commaZeroPrecisionSeparatorFormModel : 'Empty' }}

Mask: separator.0 thousandSeparator: spacebar

FormControl: {{ spacebarZeroPrecisionSeparatorForm.value ? spacebarZeroPrecisionSeparatorForm.value : 'Empty' }}

NgModel: {{ spacebarZeroPrecisionSeparatorFormModel ? spacebarZeroPrecisionSeparatorFormModel : 'Empty' }}

Custom Pattern and mask in pipe

You can pass array of maskExpression and CustomPattern into pipe

Mask: PPP-PPP-PPP

Mask: mask:'separator' : ','

Custom Pattern with special characters

You may want to use a custom pattern that also includes special characters that are allowed to be typed and deleted. In this case you should set the specialCharacters to an empty array. The example below is for a 'Surname' field where you want to allow a-z, hyphen, spaces and apostrophes.

FormControl: {{ customPatternForm.value ? customPatternForm.value : 'Empty' }}

NgModel: {{ customPatternFormModel ? customPatternFormModel : 'Empty' }}

Example code (Reactive Forms)

// In component
          {{ "public surnamePattern = { 'N': { pattern: new RegExp('[A-Za-z '-]') } };" }}

          // In template
<input mask="N*"
  [specialCharacters]="[]"
  [patterns]="surnamePattern"
  formControlName="surname" />

Empty mask

If you are conditioanlly setting the value of the mask, it should do nothing at all when the mask is set as empty

Mask: (empty string)

FormControl: {{ emptyMaskForm.value ? emptyMaskForm.value : 'Empty' }}

NgModel: {{ emptyMaskFormModel ? emptyMaskFormModel : 'Empty' }}

Patterns Masks

You could define the pattern masks IP or CPF_CNPJ.

Mask: IP

FormControl: {{ ipFormControl.value ? ipFormControl.value : 'Empty' }}

NgModel: {{ ipModel ? ipModel : 'Empty' }}

Mask: CPF_CNPJ

FormControl: {{ cpfCnpjFormControl.value ? cpfCnpjFormControl.value : 'Empty' }}

NgModel: {{ cpfCnpjModel ? cpfCnpjModel : 'Empty' }}

Dynamics Masks

You can pass into mask pattern with ||.

Mask: 000.000.000-00||00.000.000/0000-00

FormControl: {{ cpfCnpjDynamicFormControl.value ? cpfCnpjDynamicFormControl.value : 'Empty' }}

NgModel: {{ cpfCnpjDynamicModel ? cpfCnpjDynamicModel : 'Empty' }}

Mask: (00) 0000-0000||(00) 0 0000-0000

FormControl: {{ phoneBrFormControl.value ? phoneBrFormControl.value : 'Empty' }}

NgModel: {{ phoneBrModel ? phoneBrModel : 'Empty' }}

Trigger onChange on mask change

Phone prefix

+41

+49

Phone number

Mask:{{ triggerMask || 'Empty' }}

FormControl: {{ triggerInputFormControl.value ?? 'Empty' }}

Uppercase Masks

You can create inputs that only accepts uppercase.

Mask: UUUUU

FormControl: {{ textFormControl.value ? textFormControl.value : 'Empty' }}

NgModel: {{ textModel ? textModel : 'Empty' }}

Lowercase Masks

You can create inputs that only accepts lowercase.

Mask: LLLLL

FormControl: {{ textFormControl.value ? textFormControl.value : 'Empty' }}

NgModel: {{ textModel ? textModel : 'Empty' }}