fc-form-field
An element that contained field by different types
Usage
<script>
import '@forter/form-field';
</script>
<fc-form-field>
</fc-form-field>
Examples
<!-- field options -->
<fc-form-field type="
" .options="${['foo','bar']}"></fc-form-field>
<!-- input with warning -->
<fc-form-field type="number" label="foo" warning="Low Amount"></fc-form-field>
<!-- select with warning -->
<fc-form-field type="dropdown" label="foo" warning="Low Amount"></fc-form-field>
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
allowOtherOption |
allow-other-option |
string |
The additional "other" value in case of fields with multiple options that allow adding custom value | |
boldable |
boldable |
boolean |
false | If the field is boldable |
chipsType |
chips-type |
boolean |
Type of the chips (example: "more") | |
clearable |
clearable |
boolean |
false | If the field is clearable |
currencysymbol |
currencysymbol |
string |
Currency symbol to show in currency type input field (example: "$", "₪") | |
dirty |
dirty |
boolean |
false | If the field is dirty |
disabled |
disabled |
boolean |
false | If the field is disabled |
extended |
extended |
boolean |
false | If fc-input width should be extended |
hideResize |
hideResize |
boolean |
false | If hide resize in textarea |
label |
label |
string |
Label of the field | |
max |
max |
number |
Validate minimum of number value | |
maxlength |
maxlength |
number |
Validate maxlength of string value | |
menu |
menu |
boolean |
Whether or not the chips menu is enabled | |
min |
min |
number |
Validate minimum of number value | |
minlength |
minlength |
number |
Validate minimum length of string value | |
options |
options |
any[] |
||
otherOptionValue |
other-option-value |
string |
The additional "other" value in case of fields with multiple options that allow adding custom value | |
path |
path |
string |
Path of the the field what will be set on the fc-form model (example: "user.firstName", "user.email") | |
pattern |
pattern |
any[] |
Pattern validation | |
placeholder |
placeholder |
string |
Placeholder in case of input types when no value | |
readonly |
readonly |
boolean |
false | If the field is readonly |
renderErrorMessage |
"" | TemplateResult[] |
|||
required |
required |
string |
Setter for single value field | |
rows |
rows |
boolean |
"2" | Rows in textarea |
singleSelection |
single-selection |
boolean |
false | If multi field allow choosing only single value |
type |
type |
"number" | "text" | "tags" | "dropdown" | "date" | "button-group" | "currency" | "select" | "textarea" | "chips" | "segmented-control" | "radio-group" |
"text" | Type of the field - can be existing types such as: text, number, tags, dropdown or name of the type in the 'custom-renderers' object passed to fc-form. |
valid |
valid |
boolean |
true | Internal Observables |
validations |
validations |
any[] |
List of the validation name to run when value is changed | |
value |
value |
string |
Setter for single value field | |
values |
values |
any[] |
Setter for multi values field | |
warning |
warning |
"" | TemplateResult |
Events
Event |
---|
field-removed |
CSS Custom Properties
Property | Description |
---|---|
--fc-form-field-disabled-color |
disabled color. example: gray
|