Form data components
Form data components are components that must be placed inside a form and allow for an input of data. The form data components offered by OntimizeWeb are checkbox, combo, currency, date, email, file, hour, html, integer, list picker, NIF, password, percent, radio, real, slider, slide toggle, text, textarea and time.
All input components in OntimizeWeb extend the OFormDataComponent class. This class provides a set of methods and attributes inherited by all the input components. This methods and attributes are explained on the API section of this page.
Data
You can modify value by setting the data attribute or calling the setData method.
<o-text-input attr="input2" label="{{ 'INPUT.BUTTON.TEXT' | oTranslate }}" [data]="getValue()" read-only="no" required="yes"
tooltip="This is an awesome tooltip!"></o-text-input>
getValue() {
return 'John Doe';
}
Validation
The input shows automatically an error message when the required attribute is set to yes and there is no value on the input.
Input
User can add its own validators to a input component using the validators input.
<o-text-input attr="input" label="{{ 'INPUT.BUTTON.TEXT' | oTranslate }}"
[validators]="validatorsArray"></o-text-input>
...
import { ValidatorFn, ValidationErrors, FormControl } from '@angular/forms';
validatorsArray: ValidatorFn[] = [];
constructor() {
this.validatorsArray.push(this.aValidator);
this.validatorsArray.push(this.bValidator);
}
aValidator(control: FormControl): ValidationErrors {
let result = {};
if (control.value && control.value.toString().indexOf('a') === -1) {
result['requiredLowercaseA'] = true;
}
if (control.value && control.value.toString().indexOf('A') === -1) {
result['requiredUppercaseA'] = true;
}
return result;
}
bValidator(control: FormControl): ValidationErrors {
if (control.value && control.value.toString().indexOf('b') === -1) {
return {
'requiredB': true
};
}
return {};
}
...
Validation component
Using the validators input has the disadvantage that the user cannot define any validation error message for their custom validators. For doing that user has the o-validator and o-error components.
Enabled
The enabled mode is actived by default. You can disabled the input by setting enabled='no'.
<o-text-input attr="input3" label="{{ 'INPUT.BUTTON.TEXT' | oTranslate }}" enabled="no" [data]="getValue()"></o-text-input>
Read-only
The readonly mode represents an element that is no longer editable by the user. You can configure for an input to be reandonly read-only="yes".
<o-text-input fxFlex attr="input" label="{{ 'INPUT.BUTTON.TEXT' | oTranslate }}" read-only="yes" [data]="getValue()"></o-text-input>
Tooltip
To create a tooltip, add the tooltip attribute to an element. By default, the tooltip will appear on bottom of the element. Use tooltip-position attribute to set the position of the tooltip on top, bottom, left or the right side of the element.
<o-text-input attr="input2" label="{{ 'INPUT.BUTTON.TEXT' | oTranslate }}" [data]="getValue()" read-only="no" required="yes"
tooltip="This is an awesome tooltip!" tooltip-position="left"></o-text-input>
Width
All input conponents have the width atribute. It allows you to can specify the width in pixels (px) or percentage (%) of the input component.
Class: FormDataComponent
Properties
| Name | Type | Description |
|---|---|---|
elementRef |
property |
Name of the column |
Inputs
| Name | Description | Default |
|---|---|---|
|
attr string |
Field identifier. Registry property if component is inside a form. |
|
|
automatic-binding no | false | yes | true |
Indicates whether or not the component will bind its value to its |
yes |
|
automatic-registering no | false | yes | true |
Indicates whether or not the component will register itself (using its |
yes |
|
clear-button no | false | yes | true |
Indicates whether or not to show the clear button |
no |
|
data |
Manually setted component value |
|
|
enabled no | false | yes | true |
Indicates whether or not the field is enabled |
yes |
|
label string |
Field label (placeholder when field is empty and floating label when field has data) |
|
|
read-only no | false | yes | true |
Indicates whether the input value is modifiable or not. This attribute may be ignored depending on the value of the |
no |
|
required no | false | yes | true |
Indicates whether or not the field is required |
no |
|
sql-type string |
Data type according to Java standard. See SQL Types |
OTHER |
|
tooltip string |
Field tooltip text |
|
|
tooltip-position before | after | above | below | left | right |
Field tooltip position |
below |
|
tooltip-show-delay number |
Field tooltip display time |
500 |
|
validators ValidatorFn[] |
Array of custom validators to apply to the component value. Each elemnent must be a Angular ValidatorFn |
[] |
|
width string |
Indicates the width of input component in pixels (px) or percentage (%) |
|
Outputs
| Name | Description |
|---|---|
|
onChange |
Event triggered when component value changes. |
|
onValueChange EventEmitter<OValueChangeEvent> |
Event triggered when component value changes, eventobject emitted by OValueChangeEvent object. |
Methods
| getActiveOErrors() |
|---|
| Returns a array containing the customized error values that the component has. Each element has a 'name' and a 'text' properties |
| Returns |
| IErrorData[] |
| getFormControl() |
|---|
| Returns the form control of the input. |
| Returns |
| FormControl |
| getFormGroup() |
|---|
| Returns the form group of the input. |
| Returns |
| FormControl |
| getSQLType() |
|---|
| Returns the code of sqltype of the input. |
| Returns |
| number |
| getSelectedItems() |
|---|
| Returns the selected items of the component. |
| Returns |
| any[] |
| getValue() |
|---|
| Returns the selected items of the component. |
| Returns |
| any |
| hasError() |
|---|
| Set the selected items of the component. |
| Parameters |
| string |
| Returns |
| boolean |
| isAutomaticBinding() |
|---|
| Returns the input is automatic binding. |
| Returns |
| boolean |
| isAutomaticRegistering() |
|---|
| Returns the input is automatic registering. |
| Returns |
| boolean |
| setSelectedItems() |
|---|
| Set the selected items of the component. |
| Parameters |
| any[] |
| setValue() |
|---|
| Set value of the component. |
| Parameters |
| any |
Class: OValueChangeEvent
Inputs
| Name | Description | Default |
|---|---|---|
|
newValue |
The new value for the target. |
|
|
oldValue |
The old value for the target. |
|
|
target |
Reference to the input. |
|
|
type 0 | 1 |
The value is 0 if the change is emitted by the user or 1 if change is emitted by programmaticñ |
|