fc-form
An element to be used as container for form fields
Usage
<script>
import '@forter/form';
</script>
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="text" path="dog.name.firstName" label="dog first name" placeholder="Enter dog name.."></fc-form-field>
<fc-form-field required type="textarea" hideResize="true" rows="2" path="dog.story" label="dog story" placeholder="Enter dog story.."></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
<fc-form-field type="currency" currencysymbol="₪" path="dog.money" label="dog amount of money" placeholder="Enter money.."></fc-form-field>
<fc-form-field type="date" path="dog.birthDate" value="1590065478943" label="birth date"></fc-form-field>
<fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]'></fc-form-field>
<fc-form-field type="dropdown" clearable="" path="dog.height" label="dog height" placeholder="select dog height" options='["short", "medium", "tall"]'></fc-form-field>
<fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
<fc-form-field type="button-group" path="dog.size" label="dog size" options='["big", "small", "medium"]' single-selection></fc-form-field>
<fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select" single-selection><option value="grey">grey color</option><option value="brown">brown color</option></fc-form-field>
<fc-form-field type="chips" path="dog.clothes" label="dog clothes" options='["sweater","boots","tail-warmer"]'></fc-form-field>
<fc-form-field type="chips" menu path="dog.names" label="dog names" options='["sweetheart","cutie","baby"]' values='["sweetheart"]'></fc-form-field>
<fc-form-field type="segmented-control" path="dog.color" label="dog color" options='[{"value":"Brown","label":"Brown"},{"value":"Black","label":"Black"},{"value":"White","label":"White","default":true},{"value":"Beige","label":"Beige","disabled":true}]'></fc-form-field>
</fc-form-section>
<fc-form-section>
<fc-form-field type="text" path="dog.name.lastName" label="dog last name" placeholder="Enter dog name.."></fc-form-field>
</fc-form-section>
<fc-form-section>
<fc-form-field value="1" type="radio-group" path="dog.healthy" label="dog healthy">
<option value="1">Yes</option>
<option value="0">No :(</option>
</fc-form-field>
<fc-form-section>
</fc-form>
Examples
<!-- recustive sections -->
<fc-form style="background-color:white;padding:0">
<fc-form-section recursive style=" margin-bottom: -2px;">
<fc-button-group single-selection>
<button active>AND</button>
<button>OR</button>
</fc-button-group>
<fc-button width="small">
<fc-icon-svg name="add" size="small"></fc-icon-svg>
Add Group
</fc-button>
<fc-button width="small">
<fc-icon-svg name="add" size="small"></fc-icon-svg>
Add Field
</fc-button>
</fc-form-section>
<fc-form-section recursive sticky>
<fc-select label="First Name" placeholder="Matches" list='["Matches", "Contains", "Starts With"]'>
</fc-select>
<fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
<fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
<fc-form-section recursive>
<fc-button-group single-selection>
<button active>AND</button>
<button>OR</button>
</fc-button-group>
<fc-button width="small">
<fc-icon-svg name="add" size="small"></fc-icon-svg>
Add Group
</fc-button>
<fc-button width="small">
<fc-icon-svg name="add" size="small"></fc-icon-svg>
Add Field
</fc-button>
<fc-button icon="delete"></fc-button></fc-button>
</fc-form-section >
<fc-form-section recursive sticky>
<fc-select label="First Name" placeholder="Matches" list="['Matches', 'Contains', 'Starts With']">
</fc-select>
<fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
<fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
<fc-separator></fc-separator>
<fc-select label="Last Name" placeholder="Matches" list="['Matches', 'Contains', 'Starts With']">
</fc-select>
<fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
<fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
<fc-form-section recursive>
<fc-button-group single-selection>
<button active>AND</button>
<button>OR</button>
</fc-button-group>
<fc-button width="small">
<fc-icon-svg name="add" size="small"></fc-icon-svg>
Add Group
</fc-button>
<fc-button width="small">
<fc-icon-svg name="add" size="small"></fc-icon-svg>
Add Field
</fc-button>
<fc-button icon="delete"></fc-button></fc-button>
</fc-form-section >
<fc-form-section recursive sticky>
<fc-select label="First Name" placeholder="Matches" list="['Matches', 'Contains', 'Starts With']">
</fc-select>
<fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
<fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
<fc-separator></fc-separator>
<fc-select label="Last Name" placeholder="Matches" list="['Matches', 'Contains', 'Starts With']">
</fc-select>
<fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
<fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
</fc-form-section>
</fc-form-section>
</fc-form-section>
</fc-form>
<!-- Sample:single section -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample:single section with tags, dropdowns and text -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
<fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]'></fc-form-field>
<fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: default values -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="tags" path="dog.breed" label="dog breed">
<option value="terrier" default>Terrier</option>
<option value="labrador">Labrador</option>
<option value="german shepherd">German Shepherd</option>
</fc-form-field>
<fc-form-field type="dropdown" path="dog.food" label="dog food">
<option value="bones">Bones</option>
<option value="carrots">Carrots</option>
<option value="fish" default>Fish</option>
</fc-form-field>
<fc-form-field type="button-group" path="dog.ageCategory" label="dog age category">
<option value="1">0-3</option>
<option value="2" default>3-8</option>
<option value="3">8+</option>
</fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample:one section with break line -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section>
<fc-form-field type="text" path="dog.firstName" label="dog first name" placeholder="Enter dog first name.." required></fc-form-field>
<fc-form-field type="text" path="dog.lastName" label="dog last name" placeholder="Enter dog last name.." required></fc-form-field>
<fc-form-break-line></fc-form-break-line>
<fc-form-field type="text" path="owner.firstName" label="owner first name" placeholder="Enter owner fiest name.." required></fc-form-field>
<fc-form-field type="text" path="owner.lastName" label="owner last name" placeholder="Enter owner last name.." required></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample:two sections with required fields -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="text" path="dog.firstName" label="dog first name" placeholder="Enter dog first name.." required></fc-form-field>
<fc-form-field type="text" path="dog.lastName" label="dog last name" placeholder="Enter dog last name.." required></fc-form-field>
</fc-form-section>
<fc-form-section label="Owner Details">
<fc-form-field type="text" path="owner.firstName" label="owner first name" placeholder="Enter owner fiest name.." required></fc-form-field>
<fc-form-field type="text" path="owner.lastName" label="owner last name" placeholder="Enter owner last name.." required></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample:text and numbers and date -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
<fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
</fc-form-section>
<fc-form-section label="Owner Details">
<fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.."></fc-form-field>
<fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.."></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample:text, numbers and validations -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="text" path="dog.name" label="dog name (up to 10 chars)" maxlength="10" placeholder="Enter dog name.."></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age (1-99)" placeholder="Enter dog age.." min="1" max="99"></fc-form-field>
</fc-form-section>
<fc-form-section label="Owner Details">
<fc-form-field type="text" path="owner.name" label="owner name (at least 5 chars)" minlength="5" placeholder="Enter owner name.."></fc-form-field>
<fc-form-field type="text" path="owner.phone" label="owner phone (5 to 10 chars)" placeholder="Enter owner phone.." minlength="5" maxlength="10"></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample:text, numbers, tags, dropdowns and required fields -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
<fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
<fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
</fc-form-section>
<fc-form-section label="Owner Details">
<fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.." required></fc-form-field>
<fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.." required></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample:collapsable with text, numbers, tags, dropdowns and required fields -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details" collapsable>
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
<fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
<fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]' required></fc-form-field>
</fc-form-section>
<fc-form-section label="Owner Details" collapsable>
<fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.." required></fc-form-field>
<fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.." required></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: column alignment -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details" align="column">
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
<fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
<fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]' required></fc-form-field>
<fc-form-field type="segmented-control" path="dog.color" label="dog color" options='[{"value":"Brown","label":"Brown"},{"value":"Black","label":"Black"},{"value":"White","label":"White","default":true},{"value":"Beige","label":"Beige","disabled":true}]'></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: with other value -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="tags" allow-other-option path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
<fc-form-field type="tags" allow-other-option path="dog.breed" label="dog breed">
<option value="terrier">Terrier</option>
<option value="labrador">Labrador</option>
<option value="german shepherd">German Shepherd</option>
</fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: pre-defined values -->
<fc-form model='{"dog":{"money": "10", "color": "gray_value", "name":"joey", "age": "5", "breed": "terrier", "food": ["fish", "bones"], "birthDate": "1593810000000"}}'>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="currency" path="dog.money" label="dog money" placeholder="Enter dog name.." required></fc-form-field>
<fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select color.." required><option value="gray_value">gray color</option><option value="black_value">black color</option></fc-form-field>
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
<fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
<fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
<fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
<fc-form-field type="segmented-control" options='["bones", "carrots", "fish"]'path="dog.birthDate"></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: pre-defined other value -->
<fc-form model='{"dog":{"food": ["fish", "steak"]}}'>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="tags" allow-other-option path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: field with icons -->
<fc-form>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field type="tags"
style="--fc-form-tags-padding: 5px 10px;"
path="dog.icon"
label="dog icon">
<option value="next"><fc-icon icon="next"></fc-icon></option>
<option value="star"><fc-icon icon="star"></fc-icon></option>
</fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: Reset form to pre-defined values -->
<fc-form model='{"dog":{"color": "gray_value", "age": "5", "food": ["fish", "bones"], "birthDate": "1593810000000", "feces": "black"}}' id="register-form">
<label>Register new Dog</label>
<button onclick="function resetForm() {
let dogElement = document.getElementById('register-form').reset();
};resetForm()">Reset Form</button>
<fc-form-section label="Dog Details">
<fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select color.." required><option value="gray_value">gray color</option><option value="black_value">black color</option></fc-form-field>
<fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
<fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
<fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
<fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
<fc-form-field type="segmented-control" label="feces" path="dog.feces" options='[{"value": "brown", "label": "Brown"}, {"value": "black", "label": "Black"}]'></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: Field is disabled -->
<fc-form model='{"dog":{"disabledDogFood": ["carrots"], "activeDogFood": ["fish"]}, "dog2":{"disabledDogFood": ["carrots"], "activeDogFood": ["fish"]}}'>
<label>Register new Dog</label>
<fc-form-section label="Dog Details">
<fc-form-field
disabled
path="dog.disabledDogFood"
type="button-group"
label="disabled dog food"
options='["bones", "carrots", "fish"]'>
</fc-form-field>
<fc-form-field
path="dog.activeDogFood"
type="button-group"
label="active dog food"
options='["fish", "carrots"]'></fc-form-field>
</fc-form-section>
<fc-form-section label="Dog Details 2">
<fc-form-field
disabled
path="dog2.disabledDogFood"
type="tags"
label="disabled dog food"
options='["bones", "carrots", "fish"]'>
</fc-form-field>
<fc-form-field
path="dog2.activeDogFood"
type="tags"
label="active dog food"
options='["fish", "carrots"]'></fc-form-field>
</fc-form-section>
</fc-form>
<!-- Sample: pre-defined values and remove field -->
<fc-form model='{"dog":{"name":"joey", "age": "5", "breed": "terrier", "food": ["fish", "bones"]}}'>
<label>Register new Dog
<button onclick="function toggleDogName() {
let dogElement = document.getElementById('dog-name');
if (dogElement && dogElement.parentElement) {
dogElement.parentElement.removeChild(dogElement);
} else {
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
let docSectionElement = document.getElementById('dog-section');
let newDogNameElement = htmlToElement(`<fc-form-field id='dog-name' type='text' path='dog.name' label='dog name' placeholder='Enter dog name..' required></fc-form-field>`);
docSectionElement.prepend(newDogNameElement);
}
};toggleDogName()">toggle dog name</button>
</label>
<fc-form-section id="dog-section" label="Dog Details">
<fc-form-field id="dog-name" type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
<fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
<fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
<fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
</fc-form-section>
</fc-form>
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
customRenderers |
custom-renderers |
any |
{} | Object with custom render functions to build custom fields. Key is the "type" property to pass the fc-form-field Value is a function that return lit-html template. |
customValidators |
custom-validators |
any |
{} | Object with custom validations functions Key is the validator name property to pass the fc-form-field in the "validations" property Value is a function that return null if the feild is valid, else should return string that is the error enum |
dirty |
dirty |
boolean |
false | If the form is dirty |
disabled |
disabled |
boolean |
false | If the element is disabled |
initSectionCount |
WeakMap<any, any> |
|||
invalidFields |
invalidFields |
any[] |
List of invalid fields | |
missingRequiredFields |
missingRequiredFields |
any[] |
List of required fields that are empty | |
model |
model |
{} |
{} | Model of the data |
renderErrorMessage |
render-error-message |
any |
Object with function to render the validation error Key is the errorEnum Value is a function that will return string of the error message |
|
touched |
touched |
boolean |
false | If the form was touched by the user |
valid |
valid |
boolean |
false | Internal Observables |
Events
Event |
---|
change |
CSS Custom Properties
Property | Description |
---|---|
--fc-form-background-color |
form background color. default: "white". |
--fc-form-border-radius |
form border radius. default: "5px". |
--fc-form-border-size |
form border size. default: "1px". |
--fc-form-label-font-size |
form's label font size. default: "13px". |
--fc-form-label-font-weight |
form's label font weight. default: "bold". |
--fc-form-label-margin-bottom |
form's label margin bottom. default: "8px". |
--fc-form-padding |
form inner padding. default: "10px". |
--fc-form-section-margin-bottom |
form's sections margin bottom. default: "10px". |
--fc-form-section-margin-left |
form's sections margin left. default: "2px". |