Other Inputs
Other inputs are a wrapper around Angular's form control adding convenient handling of text, number, and select inputs.
Demo
Required Imports
import { FormFieldModule } from 'nextsapien-component-lib';
Properties

Type | Name | Description | Data type | Required | Default | Demo
--- | --- | --- | --- | --- | --- | ---
Input | type | Determines the type of input | string | false | text |
Input | label | The label that will be displayed next to the form field. | string | true | n/a |
Input | placeholder | The placeholder text that will be displayed in the form field. | string | false | '' |
Input | formFieldControl | The Angular FormControl that this FormField is tied to. | FormControl | true | n/a | {{ formFieldControl?.value }}
Input | minValue | Minimum value for the range. | Number | true | 0
Input | maxValue | Maximum value for the range. | Number | true | 100
Input | dualKnobsControl | A boolean value whether to show dualKnobs or not. | boolean | false | false |
Input | reverseBarColor | A boolean value whether to reverse bar color or not. | boolean | false | false |
Input | pinValue | A boolean value whether to pin or not. | percentage | number | 0 |
Input | minDate | Minimum date. | Date | false | n/a | new Date(this.currentDate.getFullYear() - 18, this.currentDate.getMonth(), this.currentDate.getDate())
Input | maxDate | Maximum date. | Date | false | n/a | new Date(this.currentDate.getFullYear() + 120, this.currentDate.getMonth(), this.currentDate.getDate())
Input | submitted | Tells the FormField if the form has been submitted. If true, and if the wrapped FormControl contains errors, the UI is updated to indicate the error and display an error message. | boolean | false | false |
Input | required | Tells the FormField if this is a required field. If true, an indicator displays next to the label. | boolean | false | false |
Input | message value | Determines the maximum length for text inputs. | string | false | test message |
Input | maxLength | Determines the maximum length for text inputs. | string | false | 524288 |
Input | options | Determines the available options in the case that the FormField's type is 'select'. | SelectOption[] | false | [] | n/a
Input | iconHtml | Lets the user specify HTML used to display an icon to the left of the label. | SafeHtml | false | n/a | n/a
Input | hideCents | Determines whether to display cents/decimals or not for the currency type field. | boolean | false | false |
Input | decimalPosition | Determines the precision of number/currency/percent inputs. Note that if `hideCents` is on, a `currency` input will ignore this input. | number |  |  |
Input | hyperlinkTarget | Specifies where to open the linked document when type is hyperlink | string | n/a | _blank |
Input | radioDeselectable | Specifies whether the radio button is deselectable or not | boolean | n/a | false |
Input | radioTranslateLabels | Specifies whether the radio button labels to be translated or not | boolean | n/a | false |
Input | radioRippleEffect | Specifies whether the radio button on click should display a ripple effect or not | boolean | n/a | false |
Input | fieldName | The name of the form field. | n/a | n/a | n/a
Input | message | A message to display with the form field. | n/a | n/a | n/a
Input | useTooltips | Determines whether tooltips are used. | n/a | n/a | false
Input | descriptionText | Text describing the form field. | n/a | n/a | n/a
Input | max | The maximum value for the input field. | n/a | n/a | 524288
Input | min | The minimum value for the input field. | n/a | n/a | 0
Input | pinValue | Indicates whether the value should be pinned. | n/a | n/a | true
Input | dualKnobs | Determines if dual knobs are used. | n/a | n/a | false
Input | reverseBarColor | Enables reverse bar color. | n/a | n/a | false
Input | invalidPatternMessage | Error message displayed for invalid input patterns. | n/a | n/a | n/a
Input | dateFormat | Specifies the format for date input. | n/a | n/a | MM/DD/YYYY
Input | currencySymbol | The symbol for currency. | n/a | n/a | $
Input | hideCents | Determines if cents should be hidden. | n/a | n/a | false
Input | isEditable | Specifies if the field is editable. | n/a | n/a | true
Input | rowEditConfirmationObsv | An observable for row edit confirmation. | n/a | n/a | n/a
Input | errorInlineMode | Specifies if errors should be displayed inline. | n/a | n/a | false
Input | showLabelInRequiredErrorMessage | Determines if the label should appear in the required field error message. | n/a | n/a | true
Input | readOnly | Indicates whether the field is read-only. | n/a | n/a | false
Input | focus | Indicates whether the field should be focused. | n/a | n/a | false
Input | showRequiredIndicator | Determines if the required indicator should be displayed. | n/a | n/a | false
Input | maxDate | Specifies the maximum date allowed for date input fields. | n/a | n/a | n/a
Input | minDate | Specifies the minimum date allowed for date input fields. | n/a | n/a | n/a
Output | rowEdit | Emits an event when a row is edited, passing the field name and value. | n/a | n/a | n/a
Output | focusOut | Emits an event when the field loses focus. | n/a | n/a | n/a

CSS Properties

Name | Default Value
--- | ---
`--form-field-width` | 2.5rem
`--form-field-font-size` | 14px

Example usage
`{{ formFieldCode }}`