This field allows provide a numeric value as page input.
code_blocksDesign View
In the template editor, you can find the Number Field icon under the Controls component palette group.
code_blocksCode 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" |
Comments
0 comments
Please sign in to leave a comment.