Skip to main content

Number Field

Support
  • Updated

This field allows provide a numeric value as page input.

 

Number Field

 

 

 

 

Design View

In the visual editor, you can find the Number Field icon under the Controls component palette group.

 

Code View

Template Syntax

Below you can find some examples of how to use the component within a template.

Number field from 0 to 100, with increment step 10 and initial value 90.


<number-field name="quality"
              label="Quality"
              min="0"
              max="100"
              step="10"
              value="90"
              [mandatory]="true">
</number-field>

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Number Field <number-field>
PROPERTIES
CSS Class The name(s) of the CSS class used to customize the widget layout.
Type: STRING | Optional
class="my-custom-class"
Label The field label.
Type: STRING | Optional
label="fooBar"
Label Position The position of the label respect the number input field.
Type: ENUM | Optional | Values:
none
left
top

labelPosition="top"
Mandatory The flag indicating whether the field value is mandatory.
Type: BOOLEAN | Optional | Values:
true
false

[mandatory]="true"
Max The field maximum valid value.
Type: INTEGER | Optional
[max]="123"
Min The field minimum valid value.
Type: INTEGER | Optional
[min]="123"
Name The name used to reference the input field.
Type: STRING | Optional
name="fooBar"
Property The name of the thing property used to save the input value (optional).
Type: PROPERTY | Optional
property="PROPERTY"
Step The minimum value increment step.
Type: FLOAT | Optional
step="FLOAT"
Value The initial value.
Type: FLOAT | Optional
value="FLOAT"
Visibility Condition The expression that allows you to reduce the visibility of the element.
Type: STRING | Optional
*ngIf="getUser().organizationId != null"

Related articles

Comments

0 comments

Please sign in to leave a comment.