furo-ui5-number-input

furo-ui5-number-input #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-number-input.js';
exports FuroUi5NumberInput js
mixes FieldNodeAdapter

Summary: data number input field

Description #

The furo-ui5-number-input component allows the user to enter and edit numbers with data binding. It supports all features from the SAP ui5 Input element.

You can bind any number type, any furo.fat.xxx number type, furo.BigDecimal or the google.wrapper.xxx number types.

1
2
3

 <furo-ui5-number-input
    fn-bind-data="--dao(FIELDNODE)"
 ></furo-ui5-number-input>

Specificity #

  1. Attributes which are set in the html source will have the highest specificity and will never get overwritten by metas or fat.
  2. Attributes set in meta will have the lowest specificity and will be overwritten by attributes from fat.
meta fat html
1 10 100

supported FAT attributes #

  • “readonly”:“true” set the element to readonly
  • “required”:“true” set the element to required
  • “disabled”:“true” set the element to disabled
  • “placeholder”:“string” set the placeholder for the element

supported meta and constraints #

  • readonly: true , set the element to readonly
  • placeholder:“some string” set the placeholder for the element

The constraint required will mark the element as required

Methods #

bind-data(fieldNode) Bind a entity field. You can use the entity even when no data was received.

When you use at-object-ready from a furo-data-object which emits a EntityNode, just bind the field with –entity(*.fields.fieldname)

Example # 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<furo-form-layouter four>
  <furo-ui5-number-input
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input>
  <furo-ui5-number-input
    readonly
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input>
  <furo-ui5-number-input
    disabled
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input>
  <furo-ui5-number-input
    value-state="Success"
    placeholder="Placeholder"
    fn-bind-data="--doExp(*.furo_data_number_input)"
  ></furo-ui5-number-input>
</furo-form-layouter>

Attributes and Properties #

nativeInputAttributes #



_previousValueState #

default: { state: 'None', message: '' }



Events #

change #

at-change → number

Fired when the input operation has finished by pressing Enter or on focusout.

input #

at-input → ``

Fired when the value of the ui5-input changes at each keystroke, and when a suggestion item has been selected.

furo-value-changed #

at-furo-value-changed → string

Fires the field value when it changes.

Methods #

bindData #

bindData(fieldNode FieldNode ) ⟹ void

FieldNode → fn-bind-data

Binds a FieldNode to the component.

Supported types:

  • double, float, int32, uint32, sint32, fixed32, sfixed32, int64, uint64, sint64, fixed64, sfixed64

  • google.protobuf.DoubleValue, google.protobuf.FloatValue, google.protobuf.Int32Value, etc.

  • furo.fat.Doube, furo.fat.Float, furo.fat.Int32, etc.

  • furo.BigDecimal

  • fieldNode

readAttributes #

readAttributes() ⟹ void

* → fn-read-attributes

Reads the attributes which are set on the component dom. those attributes can be set. value-state, value-state-message, icon, placeholder, required,readonly,disabled Use this after manual or scripted update of the attributes.



onFnaFieldStateChanged #

onFnaFieldStateChanged(state `` ) ⟹ void

`` → fn-on-fna-field-state-changed

set the value state

  • state