Инпут с маской

Компонент InputMask используется для ввода данных в определенном формате, таком как число, дата, валюта и телефон.

С чего начать

Подключите модуль

import { InputMaskModule } from 'primeng/inputmask';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-inputmask',
  templateUrl: './prime-inputmask.component.html',
  styleUrls: ['./prime-inputmask.component.scss']
})
export class PrimeInputmaskComponent implements OnInit {
 
  val1: string;
  val2: string;
  val3: string;
  val4: string;
  val5: string;
  val6: string;
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

Встройте компонент с помощью тэга p-inputMask.

<p-inputMask mask="99-999999" [(ngModel)]="val1" placeholder="99-999999"></p-inputMask>

InputMask

Basic SSN Date Phone PhoneExt SerialNumber

Float Label

Свойства

Name	Type	Default	Description
type	string	text	HTML5 input type
mask	string	null	Mask pattern.
slotChar	string	_	Placeholder character in mask, default is underscore.
autoClear	boolean	true	Clears the incomplete value on blur.
unmask	boolean	false	Defines if ngModel sets the raw unmasked value to bound value or the formatted mask value.
style	string	null	Inline style of the input field.
styleClass	string	null	Style class of the input field.
placeholder	string	null	Advisory information to display on input.
size	number	null	Size of the input field.
maxlength	number	null	Maximum number of character allows in the input field.
tabindex	number	null	Specifies tab order of the element.
disabled	boolean	false	When present, it specifies that the element value cannot be altered.
readonly	boolean	false	When present, it specifies that an input field is read-only.
name	string	null	Name of the input field.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
required	boolean	false	When present, it specifies that an input field must be filled out before submitting the form.
characterPattern	string	[A-Za-z]	Regex pattern for alpha characters
autoFocus	boolean	false	When present, the input gets a focus automatically on load.
autocomplete	string	null	Used to define a string that autocomplete attribute the current element.
ariaLabel	string	null	Used to define a string that labels the input element.
ariaRequired	boolean	false	Used to indicate that user input is required on an element before a form can be submitted.
title	string	null	Title text of the input text.

События

Name	Parameters	Description
onFocus	event: Browser event	Callback to invoke when input receives focus.
onBlur	event: Browser event	Callback to invoke when input loses focus.
onComplete	-	Callback to invoke on when user completes the mask pattern.
onInput	-	Callback to invoke on when the input field value is altered.
onKeydown	event: KeyboardEvent	Callback to invoke on when the input receives a keydown event.

Методы

Name	Parameters	Description
focus	-	Applies focus to the input.

Image InputNumber