❤
npm
Sign UpSign In

@forter/form

1.6.6 • Public • Published

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".

Dependents (0)

Package Sidebar

Install

npm i @forter/form

Repository

github.com/forter/web-components

Homepage

github.com/forter/web-components#readme

Weekly Downloads

0

Version

1.6.6

License

Apache-2.0

Unpacked Size

304 kB

Total Files

79

Last publish

Collaborators

  • forter-npm
  • lirown
  • oweingart
Try on RunKit
Report malware