pas-base-directives: InputTypeDirective | Scheer PAS Documentation

Specification

Attribute	Type	Description	Allowed Values / Example
pasInputType	InputType	Directive selector.	text	Content is a text.
			number	Content is a number
			password	Content is a password.
			email	Content is an email.
pasInputTypeFormatter	InputTypeFormatter	Format value for display after input.	currency	Content should be formatted as a currency.
pasInputTypeFormatter	InputTypeFormatter	Format value for display after input.	decimal	Content should be formatted as a decimal.
pasInputTypeCurrencyCode	string	A valid currency code, see Angular: CurrencyPipe Parameters.	EUR (default)
pasInputTypeCurrencyDisplay	string	Specifies how the currency is indicated, see Angular: CurrencyPipe Parameters.	symbol	Display the currency symbol (default), e.g. €.
pasInputTypeCurrencyDisplay	string		code	Display the currency code, e.g. EUR.
pasInputTypeDigitsInfo	string	Specify how the digits are displayed, see Angular: DecimalPipe digitsInfo.	1.0-2
pasInputTypeTransmitted	string	Send a value as a string type to backend.	string
pasInputTypeAutocomplete	string	W3Schools: HTML <input> autocomplete Attribute	on
pasInputTypeMin	string	Specifies the minimum value for the input element.	10
pasInputTypeMax	string	Specifies the maximum value for the input element.	500

Input Types

Type	Description	Allowed Values
InputType	Defines the input value type.	`text` `number` `password` `email`
InputTypeFormatter	Activates angular pipes in combination with InputTypeNumber.	`currency` `decimal`

InputType: number

number supports the following attributes: pasInputTypeFormatter, pasInputTypeCurrencyCode, pasInputTypeDigitsInfo, pasInputTypeTransmitted, pasInputTypeMin, pasInputTypeMax

InputTypeFormatter: currency

Attribute	Default Value
pasInputTypeCurrencyCode	EUR
pasInputTypeCurrencyDisplay	symbol
pasInputTypeDigitsInfo	1.2-2
pasInputTypeMin	undefined
pasInputTypeMax	undefined

1234567.89 => 1,234,567.89 €

<pas-input-text label="currency"
                pasInputType="number"
                pasInputTypeFormatter="currency">
</pas-input-text>

If you want to display the currency code instead of the symbol, you can use the pasInputTypeCurrencyDisplay attribute.

1234567.89 => 1,234,567.89 EUR

<pas-input-text label="currency"
                pasInputType="number"
                pasInputTypeCurrencyDisplay="code"
                pasInputTypeFormatter="currency">
</pas-input-text>

value < 10 => invalid | value > 500 => invalid

<pas-input-text label="min_max"
                pasInputType="number"
                pasInputTypeMin="10"
                pasInputTypeMax="500">
</pas-input-text>

InputTypeFormatter: decimal

Attribute	Default
pasInputTypeDigitsInfo	1.0-2

1234567.89 => 1,234,567.89

<pas-input-text label="decimal"
                pasInputType="number"
                pasInputTypeFormatter="decimal">
</pas-input-text>

InputType: password

Attribute	Default
pasInputTypeAutocomplete	new-password

password => ********

<pas-input-text label="password"
                pasInputType="password"
                pasInputTypeAutocomplete="on">
</pas-input-text>

InputType: email

Validates the input value as email address.

foo@bar => ✓

<pas-input-text label="email"
                pasInputType="email">
</pas-input-text>

Dynamic Initialization

InitialFormDataRegistry is used to initialize the input value dynamically via _init object mapping in the GetData execution. There are two interfaces provided to handle data mapping:

Interface	Description
FormTextBoxInit	All parameters with additional InputType parameters.
FormTextBoxInputTypeInit	Reduced to InputType parameters.

<pas-input-text label="decimal"
                [data]="decimalData_init">
</pas-input-text>

decimalData_init = {
  pasInputType: 'number',
  pasInputTypeFormatter: 'currency',
  pasInputTypeCurrencyCode: 'EUR',
  pasInputTypeDigitsInfo: '1.0-2',
  pasInputTypeTransmitted: 'string'
};

📗

Related Pages:

📘

Related Documentation: