Platform: Step Input Component Technical Design

StepInput

Summary

The StepInput is an input element used for entering numbers. It has a text input which only accepts numbers and increment buttons ("+" and "-") to either side of input field.

Example

<fdp-step-input
  [(ngModel)]="count"
  [minValue]="0"
  [maxValue]="100"
  [precision]="0"
  [step]="1"></fdp-step-input>

Design

As this is an input control it needs to implement the FormFieldControl as described in the FormGroup Layout or extend existing BaseInputComponent.

Property Bindings

minValue: number

The minimum value the StepInput can be set to.

maxValue: number

The maximum value the StepInput can be set to.

precision: number

Numerical precision of numbers allowed in StepInput. This not only sets the display for input, but restricts the user from entering values beyond set precision.

step: number

The increment the value is increased or decreased when the StepInput increment buttons are clicked.

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

All numbers' translation can be supported in the lib implementation by using DecimalPipe which can automatically translate numbers depending on the locale.

Special Usecase: No

Redesign Required: No

---

Notes

• The subtract increment button should be disabled when the value reaches the minimum value; the add increment button should be disabled when the value is at the maximum.
• The StepInput should show an error when the input is beyond bounds set by minimum and/or maximum values.
• The StepInput should not allow characters other than numbers and decimals. e.g 3, 1.2 (or 1,2 for localized).
• The StepInput should not allow user to input numbers which go beyond precision. Example: If the precision is set to "0" only integer values should be allowed, if the precision is set to "2" only numbers to the hundredths decimal are allowed.